Jquery Validate es un plugin que nos va a permitir validar formularios del lado del cliente de un modo bastante fácil, para descargar este plugin hagan click en el siguiente enlace ... Descargar
Una vez descargado, podremos encontrar el script jquery.validate.js en la carpeta dist, aunque previamente deberemos incluir el script jquery.js que se encuentra en la carpeta lib ...
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="dist/jquery.validate.js"></script>
Ok, una vez hayamos embebidos ambos scripts en nuestro documento, podemos empezar a utilizar el plugin, supongamos que tenemos el siguiente formulario ...
<form method="post" id="formulario">
<table>
<tr>
<td>Email:</td><td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td>Nombre:</td><td><input type="text" name="nombre" id="nombre"></td>
</tr>
<tr>
<td>Edad:</td><td><input type="text" name="edad" id="edad"></td>
</tr> </table>
<button type="submit" id="btn">VALIDAR</button>
</form>
Como podemos ver tenemos 3 campos de texto: email, nombre y edad, a estos campos los vamos a evaluar con jquery validate, pero antes es necesario que sepamos las dos opciones que vamos a utilizar ...
rules: {} nos va a permitir incluir las condiciones necesarias que deberá cumplir el valor del campo para ser correcto.
messages: {} nos va a permitir configurar los mensajes que apareceran para cada una de las condiciones que incluyamos en la opción rule.
También es necesario que tengamos en cuenta algunos métodos predefinidos que nos proporciona jQuery Validate para la validación, estos son algunos ...
- required – el campo es requerido.
- remote – validación a través de un archivo remoto, puede ser por ejemplo un archivo .php.
- minlength – Mínimo de caracteres permitidos.
- maxlength – Máximo de caracteres permitidos.
- rangelength – Rango de valores.
- email – El formato válido debe de ser un email
- url – El formato válido debe ser una url
- date – El valor debe de ser una fecha. Son válidas: 12/12/2012 ó 2012/12/12
- number – El valor debe de ser un dígito o número decimal. Son válidos: 12 ó 12.3
- digits – El valor debe de ser un dígito. Son válidos: 0 1 2 3 4 ...
- creditcard – El valor debe de ser una tarjeta de crédito válida.
- equalTo – El valor del campo debe de ser igual al valor del campo indicado.
Cada uno de los métodos anteriores podrán ser utilizados en rules para validar los campos, pero uno de los aspectos más importantes de jQuery Validate es que nos brinda la posibilidad de incluir nuestros propios métodos de validación ...
jQuery.validator.addMethod("metodo", function(value, element) {
return this.optional(element) || /^[0-9a-z]+$/i.test(value);
}, "Sólo están permitidos letras y números");
Ahora que conocemos algunas herramientas que nos ofrece este plugin es hora de validar los campos del formulario que vimos al principio ...
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="dist/jquery.validate.js"></script>
<script>
$(function(){
/* Incluimos un método para validar el campo nombre */
jQuery.validator.addMethod("nombre", function(value, element) {
return this.optional(element) || /^[a-záéóóúàèìòùäëïöüñ\s]+$/i.test(value);
});
/* Capturar el click del botón */
$("#btn").on("click", function()
{
/* Validar el formulario */
$("#formulario").validate
({
rules: /* Accedemos a los campos a través de su nombre: email, nombre, edad */
{
email: {required: true, email: true, minlength: 5, maxlength: 80},
nombre: {required: true, nombre: true, minlength: 2, maxlength: 50},
edad: {required: true, digits: true, minlength: 1, maxlength: 3}
},
messages: /* Accedemos a los campos a través de su nombre: email, nombre, edad */
{
email: {required: 'El campo es requerido', email: 'El formato de email es incorrecto', minlength: 'El mínimo permitido son 5 caracteres', maxlength: 'El máximo permitido son 80 caracteres'},
nombre: {required: 'El campo es requerido', nombre: 'Sólo letras', minlength: 'El mínimo permitido son 2 caracteres', maxlength: 'El máximo permitido son 50 caracteres'},
edad: {required: 'El campo es requerido', digits: 'Sólo dígitos', minlength: 'El mínimo permitido son 1 caracteres', maxlength: 'El máximo permitido son 3 caracteres'}
}
});
});
});
</script>
</head>
<body>
<form method="post" id="formulario">
<table>
<tr>
<td>Email:</td><td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td>Nombre:</td><td><input type="text" name="nombre" id="nombre"></td>
</tr>
<tr>
<td>Edad:</td><td><input type="text" name="edad" id="edad"></td>
</tr>
</table>
<button type="submit" id="btn">VALIDAR</button>
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario