Validando Formularios con jQuery

Esta es una practica que hice hace unos meses y coloco los apuntes porque se que posiblemente en el futuro podria tocarme volverle a dar una mirada, ademas que igual tambien puede servirle a alguna otra persona.

Descarga: validacion_formulario.zip

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Registro de Usuario</title>
		<link rel="stylesheet" type="text/css" media="screen" href="css/formulario.css" />

		<script src="js/jquery.js" language="javascript"></script>
		<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
		<script src="js/jquery.validate.js" type="text/javascript"></script>

		<script language="javascript">
			$(document).ready(function() {
				$("#formulario").validate({
					rules: {
						nombre: {
							required: true,
							minlength: 5
						},
						usuario: {
							required: true,
							minlength: 4
						},
						clave: {
							required: true,
							minlength: 5
						},
						confirmarclave: {
							required: true,
							minlength: 5,
							equalTo: "#clave"
						},
						correo: {
							required: true,
							email: true
						},
						confirmarcorreo: {
							required: true,
							email: true,
							equalTo: "#correo"
						},
					},
					messages: {
							nombre: {
								required: "Por favor, ingresa tu Nombre y Apellido.",
								minlength: "Este campo debe ser de al menos 5 caracteres."
							},
							usuario: {
								required: "Por favor, ingresa tu nombre de usuario.",
								minlength: "Tu nombre de usuario debe ser de al menos 4 caracteres o mas."
							},
							clave: {
								required: "Por favor, ingresa una clave de usuario.",
								minlength: "Tu clave debe ser de al menos 5 caracteres de longitud o mas."
							},
							confirmarclave: {
								required: "Por favor, vuelve a indicar tu clave.",
								minlength: "Tu clave debe ser de al menos 5 caracteres de longitud o mas.",
								equalTo: "No coincide con tu clave, por favor, verifica."
							},
							correo: "Por favor, ingresa un correo valido.",
							confirmarcorreo: {
								required: "Por favor, ingresa un correo valido.",
								equalTo: "No coincide con tu correo, por favor, verifica."
							},
						}
					});
				});
		</script>
	</head>
	<body>
		<!-- <p align="center">Los datos con <font color="red">*</font> son obligatorios</p> -->
		<form id="formulario" name="formulario" method="post" >
			<fieldset>
				<legend>Datos Personales</legend>
				<p><label>Nombre:</label><input type="text" name="nombre" id="nombre" size="10" maxlength="10" /></p>
				<p><label>Direccion:</label><textarea name="direccion" id="direccion" rows="2" cols="30"></textarea></p>
				<p><label>Telefono Hab:</label><input type="text" name="telefhab" id="telefhab" size="10" maxlength="10" /></p>
				<p><label>Telefono Movil:</label><input type="text" name="telefmov" size="10" id="telefmov" maxlength="10" /></p>
				<p><label>Fax:</label><input type="text" name="fax"  id="fax" size="10" maxlength="10" /></p>
			</fieldset>
			<fieldset>
				<legend>Datos de Usuario:</legend>
					<p><label>Usuario:</label><input type="text" name="usuario"  id="usuario" size="10" maxlength="10" /></p>
					<p><label>Clave:</label><input type="password" name="clave"  id="clave" size="10" maxlength="10" /></p>
					<p><label>Confirmar Clave:</label><input type="password" name="confirmarclave" id="confirmarclave" size="10" maxlength="10" /></p>
					<p><label>Correo:</label><input type="text" name="correo" size="20" id="correo" maxlength="20" /></p>
					<p><label>Confirmar Correo:</label><input type="text" name="confirmarcorreo" id="confirmarcorreo" size="20" maxlength="20" /></p>
					<p><label>Pregunta Secreta:</label><input type="text" name="pregunta" id="pregunta" size="40" maxlength="40" /></p>
					<p><label>Respuesta:</label><input type="text" name="respuesta" id="respuesta" size="40" maxlength="40" /></p>
			</fieldset>
			<input type="submit" value="Registrarme" />
		</form>
	</body>
</html>

About this entry