Validar formularios con Jquery
Validar formularios con Javascript lleva demasiado tiempo creando las funciones para cada
regla y muchas veces se torna una tarea tan necesaria como densa. Sin embargo Jquery a
través de su librería validate.js lo hace demasiado fácil.
En primer lugar para este ejemplo usaré la versión de Jquery 1.8 y la librería para
validación de formularios nombrado en el anterior párrafo de esta forma:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></sc
ript>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validati
on/jquery.validate.js"></script>
El proceso de validación para cada campo de formulario es muy sencillo, simplemente
debemos agregar al formulario una class con la validación que queremos validar. Por
ejemplo para validar que un input sea obligatorio completarlo deberíamos hacer algo así:
<input type="text" class="required" />
Con eso a Jquery le alcanza para validar ese campo. Pero también podríamos tener dos
reglas, que sea obligatorio y que sea un número. En ese caso:
<input type="text" class="required number" />
Y listo!
Ahora, para que al presionar el botón submit nos valide ese formulario debemos incluir
esto:
$("#id_del_formulario").validate();
Si el formulario es correcto el formulario será enviado, de lo contrario mostrará los errores
por pantalla.
Veamos un ejemplo muy sencillo:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js">
</script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-vali
dation/jquery.validate.js"></script>
<script type="text/javascript">
function validarFormulario(){
$("#formulario").validate();
}
$(document).ready(function(){
validarFormulario();
});
</script>
<style type="text/css">
.error {color: #f00;}
</style>
</head>
<body>
<form id="formulario" action="" method="post">
<label for="nombre_y_apellido"> (*) Nombre y apellido </label>
<br />
<input type="text" name="nombre_y_apellido" id="nombre_y_apellido" class=
"required" />
<br />
<label for="sueldo"> (*) Sueldo estimativo </label>
<br />
<input type="text" name="sueldo" id="sueldo" size="5" maxlength="5" class
="required number" />
<br />
<label for="email"> (*) E-mail </label>
<br />
<input type="text" name="email" id="email" class="required email" />
<br />
<label for="telefono"> Teléfono </label>
<br />
<input type="text" name="telefono" id="telefono" />
<br />
<label for="cv"> Cv </label>
<br />
<textarea rows="5" cols="50" name="cv" id="cv" class="required"></textare
a>
<br />
(*) Campos requeridos
<br />
<input type="submit" id="enviar" value="Enviar" />
<div id="contenedor_errores"></div>
</form>
</body>
</html>
¡Probarlo!
Ahora bien, también sucede otra cosa que seguramente habrás notado y es que los
mensajes de error son mostrados en inglés, para personalizar los mensajes
deberíamos cambiar la función:
function validarFormulario(){
$("#formulario").validate();
}
Por esto:
function validarFormulario(){
jQuery.validator.messages.required = 'Esta campo es obligatorio.';
jQuery.validator.messages.number = 'Esta campo debe ser numérico.';
jQuery.validator.messages.email = 'La dirección de correo es incorrect
a.';
$("#formulario").validate();
}
Ahora ya sabemos cómo validar formularios antes de ser enviados al servidor, pero hay un
asunto más. Pensemos cómo funciona el método .validate(), al detectar que el usuario
pulsó el botón submit levantará todas las etiquetas y revisará las reglas de los campos de
formularios que son los valores de las clases, y si todos los campos son correctos enviará el
formulario. Sin embargo es muy probable que nosotros no queramos enviar el formulario,
por ejemplo, si usamos Ajax no necesitamos enviar el formulario ya que eso implica
recargar la página, y nosotros solamente necesitamos saber si el formulario está validado.
Para ello cambiaremos el método .validate() por .valid(), el cual nos devolverá true o false
dependiendo de si el formulario está correcto o no, y lo comprobaremos con un
evento .click(). Cambiar esto:
function validarFormulario(){
jQuery.validator.messages.required = 'Esta campo es obligatorio.';
jQuery.validator.messages.number = 'Esta campo debe ser numérico.';
jQuery.validator.messages.email = 'La dirección de correo es incorrec
ta.';
$("#formulario").validate();
}
Por esto:
function validarFormulario(){
jQuery.validator.messages.required = 'Esta campo es obligatorio.';
jQuery.validator.messages.number = 'Esta campo debe ser numérico.';
jQuery.validator.messages.email = 'La dirección de correo es incorrec
ta.';
$("#enviar").click(function(){
var validado = $("#formulario").valid();
if(validado){
alert('El formulario es correcto.');
}
});
}
Validar datos numéricos
En este artículo vamos a presentar una forma elegante de validar valores numéricos
en las cajas de textos de los formularios Web. Existe un plugin jQuery que se llamado
jquery.numeric.js.
El plugin simplemente no te deja escribir nada más que dígitos o números en los
campos donde se aplique. Puedes indicar que son números enteros o decimales.
Lo podemos utilizar de la siguente forma:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jquery.numeric.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#entero').numeric();
$('#decimal').numeric(",");
});
</script>
Y luego ya dentro del formulario añadiríamos los inputs con el id correspondiente:
<form method="post">
<label>Número entero: </label>
<input type="text" name="entero" id="entero" /><br/>
<label>Número decimal: </label>
<input type="text" name="decimal" id="decimal" />
</form>
