Comprobar y validar formularios con jQuery

Para validar formularios vía javascript existen muchas opciones, pero jQuery combinado con el plugin form validate es una de las soluciones más completas y fáciles de utilizar.

Form validate permite comprobar desde direcciones de e-mail hasta tarjetas de crédito. Solo hay que subir el js de jQuery y del form validate a tu sitio web y enlazarlos desde el head. Además tiene la ventaja que muestra los mensajes de error en muchos idiomas.

Instrucciones para utilizar el plugin jquery form validate

1. Vincular los js de jquery (primero) y del validador y añadir un script o un js mas con la personalización.
   
   Ejemplo con los js en la raíz:
   ...
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery-validate/jquery.validate.js"></script>
   <script type="text/javascript" src="formulario.js"></script>
   </head>
   
   


2. Para que se valide cada campo lo mas sencillo es añadir determinadas clases en cada input según lo que queramos validar.
   
   Ejemplo para un input de e-mail:
   
   <input type="text" name="email" id="email" class="required email" />
   
   Algunas de las clases y su función:
   
   required = campo obligatorio
   email = email correcto
   url = dirección url
   number = número entero
   numberDE = número con o sin decimales
   date = formato fecha (31/12/2009)
   



3. Mensajes de error
   Los mensajes de error se muestran por defecto a continuación del campo erróneo. Aparecen dentro de la etiqueta <label> pero se puede cambiar desde jquery.validate.js buscando "errorElement: label" y remplazando "label" por elemento deseado.
   Tanto el nuevo elemento mostrado como el input que da el error se les añade la clase " error ". Deberemos ajustar su visualización con CSS.
   



4. Mensajes e idioma
   Los mensajes ya están predefinidos según el error y se muestran por defecto en ingles. El plugin incluye múltiples idiomas en unos js que están dentro de la carpeta"localization". Para utilizar otro idioma enlazar el js después del plugin o copiar y pegar el texto en el js con la personalización.
   



5. Personalización de la validación
   
   
   
   • Longitud de caracteres
     Para controlar el número de caracteres de un input añadir este código en el js personalizado:
     
     
     $(document).ready(function(){
     $("#formulario").validate({ /*sustituir "formulario" por el id de vuestro formulario*/
     rules: {
     nombre: { /*id del campo que se aplica la regla*/
     required: true,
     minlength: 3 /*caracteres mínimos*/
     }
     }
     });
     });
     
     Este ejemplo exije al menos 3 caracteres como mínimo en el input con el id "nombre".
     Para limitar la longitud máxima sustituir "minlength" por "maxlength".
     Para un rango mínimo y máximo pon "rangelength" Ejemplo: rangelength: [5, 10]
     
   
   
   
   • Valores numéricos
     Funciona igual que el ejemplo anterior, solo debemos sustituir minlength por el método deseado.
     
     *Valor mínimo: min. Ej: min: 16
     *Valor máximo: max
     *Rango valores: range. Ej: range: [5, 10]
     
   
   
   
   • Coincidencia entre campos
     Esto es útil para los campos de confirmación de contraseña o e-mail. Utilizaremos equalTo del mismo modo que los ejemplo anteriores y le indicaremos el id del campo con el que debe coincidir.
     
     $(document).ready(function(){
     $("#formulario").validate({ /*sustituir "formulario" por el id de vuestro formulario*/
     rules: {
     password2: { /*id del campo que se aplica la regla*/
     equalTo: "#password" /*id del input con el que debe coincidir*/
     }
     }
     });
     });
     
   
   
   
   • Tipo archivos admitidos
     Con "accept" controlamos los archivos que se van a subir al servidor.
     
     $(document).ready(function(){
     $("#formulario").validate({ /*sustituir "formulario" por el id de vuestro formulario*/
     rules: {
     archivo: { /*id del campo que se aplica la regla*/
     accept: "jpg|gif" /*extensiones aceptadas*/
     }
     }
     });
     });
     
   
   

Para terminar un ejemplo con varias reglas juntas:

$(document).ready(function(){
$("#formulario").validate({
rules: {
nombre: {
minlength: 3,
maxlength: 10
},
repetir_clave: {
equalTo: "#clave"
},
imagen: {
accept: "jpg|gif|png"
}
}
});
});


Toda la documentación sobre el plugin en: http://docs.jquery.com/Plugins/Validation