Validación de formularios con jQuery Validation Plugin

Como ya hemos definido en otros artículos, los formularios son elementos fundamentales al momento de tratar establecer una comunicación directa con las personas que hacen uso de nuestro sitio. Gracias a ello, podemos proporcionar al usuario una forma de contacto directa, la cual puede ser utilizada para enviar y recibir datos que podemos utilizar de distintas maneras.

Una vez que hemos incluido uno o varios formularios dentro de nuestras páginas, es tiempo de validar que la información que se reciba a través de ellos sea la adecuada; ya que puede que en algunas ocasiones, el usuario se confunda y llene los campos con información incorrecta o de manera errónea. Para evitar esta clase de situaciones, se opta por hacer una verificación del contenido introducido, antes de mandarlo a nuestro servidor para su almacenaje y manejo.

Existen muchas maneras de poder validar un formulario, se puede hacer desde el lado servidor o desde el lado cliente, aunque comúnmente se recomienda hacerlo en los dos lados para tener seguridad. La ventaja que representa hacer primero esta validación desde el lado cliente, es que nos evitamos una llama innecesaria al servidor en caso de que la información sea incorrecta, además de que permite una interacción inmediata con el cliente, haciéndole ver el error que presenta la información.

Para poder validar desde el lado cliente existen varios métodos, entre ellos encontramos la validación por HTML5, la cual es bastante sencilla pero desgraciadamente no es soportada por todos los navegadores. Por ello, es mejor buscar una forma de validación universal, que nos garantice que la información será evaluada de manera igual en todos los ambientes y casos.

Para esta operación, no hay opción más sencilla que hacer uso de un plugin de validación de jQuery. En este artículo explicaremos en pasos sencillos, lo necesario para comenzar a validar nuestros formularios utilizado este framework de JavaScript.

Desarrollo del formulario

Comenzarmos por establecer un formulario sencillo, para ello haremos uso de HTML para la estructura:.

<form id="formulario_de_prueba" name="formulario_de_prueba" method="get"  action-xhr="#">
    <p>
        <label for="nombre">Nombre:</label>
        <input type="text" name="nombre" class="required" minlength=”4” size="20" />
    </p>
    <p>
        <label for="la_Webera">¿Te gusta La Webera?</label>
        <select id="respuesta_pregunta" name="la_webera">
            <option value="si" selected="selected">Sí</option>
            <option value="no">No</option>
            <option value="a veces">A veces</option>
        </select>
    </p>
    <p id="boton_contenedor">
        <input class="boton_enviar" type="submit" value="Enviar"/>
    </p>
</form>

Y un poco de CSS para el estilo:

body{
    background: #CCC;    
}
form#formulario_de_prueba {
    background: none repeat scroll 0 0 #DDDDDD;
    border: 1px dashed #888888;
    margin: 0 auto 25px;
    width: 520px;
}
label {
    color: #666666;
    font-family: Arial;
    font-size: 18px;
    padding: 15px;
}
input, select{
    border:1px solid #999999;
}
#boton_contenedor{
    margin:0 auto 15px;
    text-align:center;
}
.boton_enviar{
    padding:0.5em 1.5em;
}

Validación

Como se puede apreciar en el código de nuestro formulario, agregamos una clase llamada “required” al campo Nombre y establecimos un mínimo de caracteres para el contenido que debe tener ese campo, esto con el atributo “minlength”. En base a estas dos especificaciones, estableceremos nuestras validaciones para el campo y para ello haremos una llamada a una función de jQuery que se incluye dentro de la librería “validate” de jQuery.

Para incluir esta librería en el código, debemos añadir el siguiente script dentro de la etiqueta head de nuestro sitio:

<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>

Y para llamar a validar nuestro formulario, tenemos que agregar el siguiente código:

jQuery(function() {
   jQuery( "#formulario_de_prueba" ).validate();
});

Con esto basta para lograr una validación, cuando demos click en el botón enviar, o cuando escribamos sobre el campo podremos observar el mensaje. Vale aclarar, que también podemos dar estilo a dicho mensaje, para lograr esto basta con agregar una sentencia como la siguiente:

label.error { float: none; color: red; padding-left: .5em; vertical-align: middle; font-size: 12px; }

Personalización

Todo parece ir bien hasta ahora, pero los mensajes de validación en inglés parecen desentonar con el resto de nuestra página. Para evitar esto, podemos hacer uso de un complemento proporcionado por el mismo autor del plugin.

Para incluir nuestros mensajes en español basta con agregar el siguiente archivo después de incluir la librería:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/localization/messages_es.js"></script>

En caso de que estos mensajes no terminen por convencerte, puedes agregar los tuyos. Esto se logra de la siguiente manera:

jQuery(function() {
   jQuery( "#formulario_de_prueba" ).validate({
           rules: {
                   nombre: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   }
           },
           messages: {
                   nombre: {
                           required: "Hey vamos, por favor, dános tu nombre",
                           minlength: $.format("Necesitamos por lo menos {0} caracteres"),
                           maxlength: $.format("{0} caracteres son demasiados!")
                   }
           }
   });
});

Como se puede apreciar también cambiamos las validación del HTML al código JavaScript, de esta manera nuestro formulario puede resultar menos enredoso a simple vista. Incluso, utilizando este método, podemos agregar una validación personal, es decir, alguna regla que se exclusiva de nuestro sitio y que necesitamos sea evaluada al introducir información.

Para ello debemos crear la regla y añadirla al código de la siguiente manera:

jQuery.validator.addMethod("nuestraValidacion",
           function(value, element) {
                   return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
           },
   "Nada de caracteres especiales, por favor"
);

Y basta con poner su nombre dentro del arreglo de reglas correspondiente al campo que debe ser evaluado.