JQuery es usado cada vez más, incluso, en ofertas laborales, es una de las librerías mas solicitadas entre los conocimientos de los aspirantes, y es natural, puesto que minimizas el tiempo de desarrollo considerablemente.
Este plugin de jQuery hace que la validación de tu formulario sea sencilla, al tiempo que ofrece gran cantidad de opciones para personalizar.
El plugin viene con un útil conjunto de métodos de validación, incluidas las direcciones URL, la validación de eMail, etc. mientras que proporciona una API para escribir sus propios métodos. Todos los métodos de paquetes vienen con mensajes de error (por defecto en Inglés).
Ver demo
Lo primero que hay que hacer es descargar la ultima versión y colocarlo dentro de nuestro proyecto.
La función principal se llama validate(), es la que inicializa las validaciones del formulario y puede recibir un conjunto de parámetros opcionales que veremos mas adelante.
Usar el plugin es bastante sencillo, esta es la explicación básica:
Clic aquí para mostrar u ocultar el texto
1.- debemos incluir la librería y el plugin (entre etiquetas head):
<script src="RUTA/jquery.js"></script> <script type="text/javascript" src="RUTA/jquery.validate.js"></script>
Hay que indicar que formulario se va a validar y cuando
<script type="text/javascript">
// iniciamos que debe validar el formulario (mi_form)
$(document).ready(function(){
$("#mi_Form").validate();
});
</script>
El formulario se valida una vez se presiona el botón de envío (submit), y de haberlos, se muestran los errores correspondientes.
Rápidamente podemos indicar que campos validar solo agregando el tipo de validación (metodo) a una clase (required, email, url, etc.), ejemplo:
<input name="nombre" size="25" class="required" />
Ahí estamos indicamos que el campo "nombre" es requerido (obligatorio).
Otro ejemplo:
<!-- indicamos que valide la URL--> <input name="url" size="25" class="url" /> <!-- indicamos que valide el Email y que el campo es requerido --> <input name="email" size="25" class="required email" />
Es así de sencillo, fíjate que agregamos mas de un método dentro de "class" que en este caso no lo estamos usando para asignar estilo al campo.
Acá tienes la lista completa de métodos que puedes usar para validar:
Clic aquí para mostrar u ocultar la lista
required() -> establece el campo como obligatorio/requerido.
required(expresión) -> hace al elemento/campo requerido en función a la expresión dada.
required(callback) -> hace al elemento requerido en función del resultado de una llamada.
remote(url) --> solicita un recurso para chequear la validación.
minlength(longitud) -> establece la longitud mínima del elemento.
maxlength(longitud) -> establece la longitud máxima de un elemento.
min(valor) -> establece el valor mínimo requerido.
max(valor) -> establece el valor máximo requerido.
rangelength(rango) -> permite establecer la longitud de un rango.
range(rango) -> permite establecer un rango.
email() -> indica que debe ser un Email válido.
url() -> indica que debe ser una URL válida.
date() -> indica que debe ser una fecha válida (día/mes/año).
dateISO() -> indica que debe ser una fecha ISO válida.
dateDE() -> indica que debe ser una fecha con formato Alemán válida (día.mes.año).
number() -> indica que el valor del elemento debe ser un número (se aceptan decimales con puntos).
numberDE() -> indica que debe ser un numero válido con formato Alemán.
digits() > indica que solo se permiten números (0-9).
creditcard() -> indica que debe ser un número de tarjeta de crédito válida.
equalTo(elemento) -> indica que el elemento debe ser igual que otro.
Devuelve true si el valor tiene el mismo valor que el elemento especificado por el primer parámetro. Funciona con entradas de texto.
accept(extensión) -> indica que el elemento requiere una determinada extensión de archivo.
Devuelve true si el valor termina con una de las extensiones de archivo especificado. Si no se especifica nada, las imágenes sólo se les permite (png, jpeg, gif).
required(expresión) -> hace al elemento/campo requerido en función a la expresión dada.
required(callback) -> hace al elemento requerido en función del resultado de una llamada.
remote(url) --> solicita un recurso para chequear la validación.
minlength(longitud) -> establece la longitud mínima del elemento.
maxlength(longitud) -> establece la longitud máxima de un elemento.
min(valor) -> establece el valor mínimo requerido.
max(valor) -> establece el valor máximo requerido.
rangelength(rango) -> permite establecer la longitud de un rango.
range(rango) -> permite establecer un rango.
email() -> indica que debe ser un Email válido.
url() -> indica que debe ser una URL válida.
date() -> indica que debe ser una fecha válida (día/mes/año).
dateISO() -> indica que debe ser una fecha ISO válida.
dateDE() -> indica que debe ser una fecha con formato Alemán válida (día.mes.año).
number() -> indica que el valor del elemento debe ser un número (se aceptan decimales con puntos).
numberDE() -> indica que debe ser un numero válido con formato Alemán.
digits() > indica que solo se permiten números (0-9).
creditcard() -> indica que debe ser un número de tarjeta de crédito válida.
equalTo(elemento) -> indica que el elemento debe ser igual que otro.
Devuelve true si el valor tiene el mismo valor que el elemento especificado por el primer parámetro. Funciona con entradas de texto.
accept(extensión) -> indica que el elemento requiere una determinada extensión de archivo.
Devuelve true si el valor termina con una de las extensiones de archivo especificado. Si no se especifica nada, las imágenes sólo se les permite (png, jpeg, gif).
Los parámetros de validate().
La función validate tiene varios parámetros con los que puedes ir personalizando las validaciones, entre los más resaltantes:
- rules: permite especificar los campos que desee validar, por ejemplo:
todos los métodos que señalábamos anteriormente podemos usarlos para restringir el contenido de cada campo:
Clic aquí para mostrar u ocultar el código
$(document).ready(function() {
$("#mi_Form").validate({
rules: {
txtNombre: {
required: true, // indicamos que el campo es obligatorio
minlength: 2, // establece la longitud mínima del elemento.
maxlength: 25 // establece la longitud máxima del elemento.
},
txtCI: {
required: true,
digits: true, // indicamos que solo se permiten caracteres numericos
minlength: 2,
maxlength: 8 // la CI no puede tener mas de 8 caracteres
},
txtEmail: {
required: true,
email: true, // indicamos q el campo debe contener un email valido
maxlength: 70
},
txtEmail2: {
required: true,
equalTo: "#txtEmail" // indicamos q el campo debe ser igual a txtEmail
},
txtPass: {
required: true,
minlength: 6,
maxlength: 15
},
txtPass2: {
required: true,
equalTo: "#txtPass" // indicamos q el campo debe ser igual a txtPass
},
txtURL: {
url: true // indicamos q el campo debe contener una direccion URL valida
}
}, // fin de rules
}); // fin de validate
});// fin de ready
- messages: permite especificar el mensaje de error para un campo en particular, si no lo especifica, por defecto se mostrará el mensaje establecido para ese tipo de campo en el archivo jquery.validate.js (se explica más abajo).
- submitHandler: permite interceptar el envío del formulario.
submitHandler: function(form) {
alert('se intenta enviar el formulario');
}
el formulario no se enviara, habría que utilizar las funciones ajaxSubmit, Submit, etc.
$(form).ajaxSubmit(); // via ajax form.submit();
- invalidHandler: permite ejecutar código cuando el formulario es invalido.
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
// actualizamos el mensaje si se produce el error
var sMsj = errors == 1 ? 'El formulario tiene 1 error!'
: 'El formulario tiene ' + errors + ' campos con errores!';
alert(sMsj); // mostramos el mensaje
}
}
Agregando métodos propios: la función addMethod permite agregar métodos en tiempo de ejecución y así hacer que nuestras validaciones sean mucho mas exactas, su sintaxis es:
addMethod( nombre_del_metodo,funcion_anonima,_mensaje_error)
Clic aquí para mostrar u ocultar el texto
Definimos el nombre del método, el procedimiento a ejecutarse para la validación y el mensaje en caso de error, veamos un ejemplo:
luego cuando agreguemos las reglas (rules) llamamos la método:
de esa manera podemos definir los métodos que mas nos convengan.
// definimos un nuevo metodo
$.validator.addMethod("ValidarNombre",
function(value, element) {
if(value == "")
return false;
return value.match(/^[a-zA-ZÁÉÍÓÚáéíóúÄËÏÖÜäëïöü][a-zÁÉÍÓÚáéíóúÄËÏÖÜäëïöü_]{2,15}$/)
? true : false;
},"El nombre es invalido!");
luego cuando agreguemos las reglas (rules) llamamos la método:
$("#mi_Form").validate({
rules: {
txtNombre: {
required: true, // indicamos que el campo es obligatorio
minlength: 2, // establece la longitud mínima del elemento.
maxlength: 15, // establece la longitud máxima del elemento.
ValidarNombre: true // indicamos que valide el nombre
}
}// fin de rules
}); // fin de validate
de esa manera podemos definir los métodos que mas nos convengan.
Cambiando el idioma: mostrare dos las formas para cambiar o personalizar los mensajes, la primera es modificándolos en el archivo fuente y la segunda, estableciendo el mensaje en tiempo de ejecución:
Clic aquí para mostrar u ocultar el texto
1.- modificando el archivo fuente: Abrimos el archivo jquery.validate.js y buscamos la linea:
messages: {el bloque completo es algo así:
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
... más métodos
},
notaras que aparece el nombre de los tres métodos que usamos en el ejemplo anterior y otros mas seguidos de un mensaje en ingles, ese mensaje lo traducimos, guardamos y listo:
messages: {
required: "¡Este campo es obligatorio!",
remote: "¡Este valor es incorrecto!.",
email: "¡Ingresa una dirección de correo válida!",
url: "'¡Ingresa una URL válida!",
date: "¡Ingresa una fecha válida!",
dateISO: "¡Ingresa una fehca válida (ISO)!",
number: "'¡Ingresa un número válido (se permiten decimales)!",
digits: "¡Solo se aceptan caracteres numericos (0 al 9)!",
creditcard: "¡Ingresa un número de tarjeta de crédito válido!",
equalTo: "¡Los valores no coinciden, intenta de nuevo!",
accept: "¡Ingresa un valor con extensión válida!",
maxlength: $.validator.format("¡Debes introducir un máximo de {0} caractéres!"),
minlength: $.validator.format("¡Debes introducir por lo menos {0} caractéres!"),
rangelength: $.validator.format("¡La longitud permitida es entre {0} y {1} caractéres!"),
range: $.validator.format("¡El rango permitido es entre {0} y {1}!"),
max: $.validator.format("¡Ingresa un valor menor o igual que {0}!"),
min: $.validator.format("¡Ingresa un valor mayor o igual que {0}!")
},2.- asignando mensajes en tiempo de ejecución: consiste en agregarle un mensaje a los campos que deseemos, pasándole esos datos a la función validate().
messages: {
nombre_campo: "mensaje"
}ejemplo:
<script>
// iniciamos que debe validar el formulario (mi_form)
$(document).ready(function(){
$("#mi_Form").validate({
messages: {
mi_campo1: "aqui el mensaje para el mi_campo1.",
mi_campo2: "aqui el mensaje para el mi_campo2."
}
}) // fin de validate
});
</script>
nota
Aunque es muy bonito hacer las validaciones con JQuery, depende mucho de la configuración del navegador, lo recomendable siempre es hacer las validaciones tanto del lado del cliente como del servidor, solo así garantizas la seguridad en tus proyectos.Enlaces:
Sitio oficial
Ver demo
Documentación
- Los comentarios están siendo moderados y serán publicados en la brevedad posible.