Validar formularios con jQuery

Validar un formulario sin tener la necesidad de recargar el documento completo es claramente una practica más que recomendable. Para lograr esto Javascript es la mejor opción, porque sacando algún que otro método es el más simple, y si utilizamos para su implementación jQuery, bueno, no hay mucho más que pensar.

Para jQuery hay varios plugin para la validación de formularios, pero en esta entrada vamos a hablar de Validity que es uno de los más recientes.

Validity es un plugin completamente gratuito, que nos permite validar nuestros formularios de manera muy simple, y tiene un peso de apenas 9 KB, muy buen tamaño para no aumentar los tiempos de descarga.

La instalación forma de utilizar este plugin es la siguiente:

<link type="text/css" rel="Stylesheet" href="jquery.validity.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validity.js"></script>

<script type="text/javascript">
    $(function() {
        $("form").validity(function() { 
        });
    });
</script>

El plugin se puede configurar a un nivel muy importante, no solo podemos personalizar el mensaje de error, sino el tipo de dato a validar, y todo con apenas unas líneas de código, pueden ver las opciones de personalización directamente de la documentación oficial, no obstante coloco a continuación el ejemplo propuesto:

$("form").validity(function() {
    $("#vehicles")                      // The first input:    
        .require()                          // Required:
        .match("number")                    // In the format of a number:
        .range(4, 12);                      // Between 4 and 12 (inclusively):
   
    $("#dob")                           // The second input:
        .require()                          // Required:
        .match("date")                      // In the format of a date:
        .lessThanOrEqualTo(new Date());     // In the past (less than or equal to today):
});

Merece la pena estudiar más a fondo este plugin, creo que puede ahorrarnos mucho tiempo 😀

Web: Validity