¡Muy buenas!
En esta entrada de blog me gustaría introducir, a quién no conozca o no lo haya usado nunca, la librería jQuery validator.
Es una extensión de jquery que sirve para la validación (¡qué sorpresa!) de formularios en el lado del cliente.
Para empezar aquí tenéis la web la qual nos podremos descargar el código y, además, podremos encontrar diferentes ejemplos de uso.
Los métodos principales que añade esta librería son los siguientes:
- validate(): Inicializa la validación del formulario y, además, lo valida.
- valid(): Se usa para validar el formulario. No acepta ningún argumento, se usa una vez hecho el método validate.
- rules(): Añade, modifica y elimina normas de validación.
Las principales validaciones que podemos hacer a los campos son las siguientes:
- required – Hace que el elemento sea obligatorio.
- remote – Solicita un recurso para validar el elemento.
- minlength – Marca el número de carácteres mínimos para que sea válido.
- maxlength – Marca el número de carácteres máximos para que sea válido.
- rangelength – Marca el número de carácteres mínimos y máximos para que sea válido.
- min – (Número) Marca un número mínimo para que el elemento sea válido.
- max – (Número) Marca un número máximo para que el elemento sea válido.
- range – (Número) Marca un número mínimo y máximo para que el elemento sea válido.
- email – Valida si el email introducido tiene un formato correcto.
- url – Valida si la url introducida tiene un formato correcto.
- date – Valida si la fecha introducida tiene un formato correcto.
- dateISO – Valida si la fecha introducida tiene un formato ISO correcto.
- number – Valida si el elemento es un número decimal.
- digits – Valida si todos los carácteres del elemento son números.
- creditcard – Valida si el elemento es un número de targeta de crédito.
- equalTo – Valida si el elemento es igual a otro elemento especificado.
Si ninguna de estas validaciones encajan con tu formulario podrias añadir tus propias funciones, por ejemplo un validador de email más complejo que el de por defecto:
| $.validator.addMethod(“emailCustomValidation”, function(value, element, arg){ var patt = new RegExp(“^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@” + “[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$”); return patt.test(value); }, “El correo electrónico introducido no tiene un formato correcto”); |
Para finalizar, vamos a listar las principales opcions de la función validate y pondré un ejemplo:
- rules: Añade normas en los elementos del formulario.
- messages: Puedes añadir mensajes personalizados para las validaciones (si no estan aparece el de por defecto).
- highlight: Cómo se remarca un elemento cuando es inválido.
- unhighlight: Cómo se se desmarca un elemento cuando es válido.
- onclick: Valida los checkboxes y los radio buttons cuando se pulsan.
- errorClass: Nombre de la clase que se añade cuando es inválido.
- validClass: Nombre de la clase que se añade al elemento cuando es válido.
- Todas las demás opciones las encontraréis aquí.
Ejemplo:
| var messageRequiredName = “El campo nombre es obligatorio”; … $(‘#contactform’).validate({ rules: { //Normas en los campos name :{required:true, maxlength:75, minlength:2}, email :{required:true, maxlength:75, emailValidation: true}, comment :{required:true, maxlength:200, minlength: 10} }, messages: { //Mensajes de error name : {required:messageRequiredName, minlength: messageLeastName}, email : {required:messageRequiredEmail, emailValidation: messageInvalidEmail}, comment : {required:messageRequiredComments, minlength: messageLeastComments} }, highlight: function(element) { //Resalta cuando sea inválido $(element).parent().addClass(“has-error”); $(element).parent().find(‘.form-control-feedback’).css(‘display’,’initial’); }, unhighlight: function(element) { //Desmarca cuando sea válido $(element).parent().removeClass(“has-error”); $(element).parent().find(‘.form-control-feedback’).css(‘display’,’none’); } }); |
¡Espero que os sea útil!