jquery.

validation o cmo validar tus formularios

Llevo mucho tiempo queriendo hincar el diente al plugin de jQuery, jquery.validation. Como desarrollador de programas de gestin, el validar formularios es una tarea obligada y repetitiva. Siendo as quiero abandonar mis actuales mtodos manuales de validacin y adoptar una nueva mecnica de validacin cuyo cdigo sea ms limpio, compacto y extensible. Buscando en Internet, todas las pistas nos conducen a jquery.validation. De hecho, incluso Microsoft y sus proyectos ASP.NET MVC3 delega las tareas de validacin en este plugin en detrimento de sus propias libreras de scripting a las que ya no da soporte. Cabe mencionar que la utilizacin de jquery.validation en proyectos de tipo ASP.NET WebForms se complica un poco por la capa de abstraccin que agrega esta tecnologa y la imposicin de que cualquier pgina debe y slo puede tener un formulario. Siendo as, los ejemplos de este post estn plenamente enfocados a pginas web sin tener en cuenta el lado del servidor. Es decir, este post servir a desarrolladores de ASP.NET, de PHP, etc. Todo ello porque nos quedamos en el lado cliente y no nos importa el lado del servidor.

Instalacin
El primer e ineludible paso es descargar el plugin. La pgina oficial es http://bassistance.de/jquery-plugins/jquery-plugin-validation/ Si trabajas con Visual Studio puedes descargar el paquete a travs de NuGet, que resulta ms cmodo y adems incluye las dependencias necesarias, que en nuestro caso es solamente la librera jQuery. La documentacin sobre el plugin est disponible en http://rocketsquared.com/wiki/Plugins/Validation Para comenzar a utilizar jquery.validation, simplemente debemos agregar una referencia a las libreras jQuery y jquery.validation en nuestra pgina.
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script> <script src="Scripts/jquery.validate.js" type="text/javascript"></script>

Conceptos bsicos
Si trabajamos con jquery.validation hay que tener claros que son los mtodos de validacin y las reglas de validacin. Los mtodos de validacin implementan el cdigo necesario para validar un elemento.

De serie tenemos disponibles un nmero considerable de mtodos de validacin para las comprobaciones ms habituales, pero siempre es posible agregar a jquery.validation nuestras propias validaciones personalizadas. Por ejemplo, un mtodo de validacin sera el cdigo necesario para validar que la entrada es numrica. Por otro lado, las reglas de validacin permiten asociar un elemento de nuestro formulario a uno o ms mtodos de validacin. Para asociar una regla de validacin a un elemento, podemos hacerlo de las siguientes formas que no son excluyentes y pueden combinarse segn nuestras necesidades:

A travs de nombres de clases css en atributo class. Por ejemplo class=required number especifica que nuestro elemento ser requerido y slo aceptar nmeros. o Por supuesto, estos nombres de clases no tienen por qu existir en tu hoja de estilos, son clases que utilizar slo jquery.validation. Con atributos personalizados que requieren parmetros. Por ejemplo <input type=text minlength=3>, especifica que el contenido de nuestra caja de texto no debera ser menor a 3 caracteres A travs de cdigo javascript y aadiendo las reglas a travs del objeto rules.

Un primer ejemplo
Con este primer ejemplo romperemos el hielo.
<form method="post" id="myForm"> <p> Nombre <input type="text" id="nombre" name="nombre" class="required" /> </p> <p> Edad <input type="text" id="edad" name="edad" class="required digits" /> </p> <p> <input type="submit" value="Enviar" /> </p> </form> <script type="text/javascript"> $().ready(function () { $("#myForm").validate({ debug: true }); }); </script>

En este formulario cabe resear lo siguiente:

Hemos especificado las reglas de validacin a travs de nombres de clases. Hemos llamado al mtodo validate() para el elemento myForm, que configura el formulario para que sea validado.

Adems hemos especificado que estamos en depuracin para que el formulario no sea enviado. Lgicamente, en produccin no tendremos activado este parmetro. A partir de este momento, el formulario no podr ser enviado si no cumple con nuestras reglas impuestas.
o

Si ampliamos el ejemplo anterior para que el nombre tenga al menos 2 caracteres y la edad est comprendida entre 18 y 99 aos, tendremos que especificar estas reglas de validacin a travs de atributos con parmetros:
<form method="post" id="myForm"> <p> Nombre <input type="text" id="nombre" name="nombre" class="required" minlength="2" /> </p> <p> Edad <input type="text" id="edad" name="edad" class="required digits" min="18" max="99" /> </p> <p> <input type="submit" value="Enviar" /> </p> </form>

Si nos gusta especificar las reglas de validacin a travs de nombres de clases o atributos con parmetros, podemos utilizar javascript para acceder al objeto rules y meterlas por cdigo:
<form method="post" id="myForm"> <p> Nombre <input type="text" id="nombre" name="nombre" /> </p> <p> Edad <input type="text" id="edad" name="edad" /> </p> <p> <input type="submit" value="Enviar" /> </p> </form> <script type="text/javascript"> $().ready(function () { $("#myForm").validate({ debug: true, rules: { nombre: { required: true, minlength: 2 }, edad: { required: true, digits: true, min: 18, max: 99 }

} }); }); </script>

Mensajes de error
Algo importante cuando validamos, es cmo y dnde se muestran los mensajes de error. Cuando sucede un error durante la validacin, por defecto jquery.validation agrega dinmicamente una etiqueta label a continuacin del campo validado. Adems, el mensaje de esta etiqueta es igualmente predefinido y est en ingls.

En lo relativo al nuevo elemento label creado, te dir que es posible especificar el tipo de elemento que queremos crear para mostrar un error, en qu lugar del documento queremos que aparezca, mostrar resmenes de errores para agrupar los mensajes, etc. Lo cierto es que el plugin jquery.validation es muy configurable y se puede hacer con l casi cualquier cosa. En un punto siguiente en este mismo post, dar unas breves indicaciones de cmo personalizar este mensaje (digo breves porque si no este post sera infinito y lo que pretendo es que sea una introduccin a jquery.validation). Lo que s me parece muy importante es la traduccin del mensaje. Despus de todo, de poco servira este plugin si los mensajes fueran hardcode. La forma ms sencilla de traducir los mensajes es bajarse la traduccin de los mismos al lenguaje que necesites. Por defecto, jquery.validation est traducido a ms de 41 idiomas, pero si aun as tu idioma no est disponible, es bastante sencillo traducirlo. En la misma descarga del plugin, hay una carpeta localization donde estn todos los ficheros de idioma. Si por ejemplo, queremos los mensajes en espaol bastara con incluir la siguiente referencia a nuestra pgina, siempre despus de la referencia a jquery.validation.
<script src="Scripts/messages_es.js" type="text/javascript"></script>

El contenido de este fichero es el siguiente:

/* * Translated default messages for the jQuery validation plugin.

* Locale: ES */ jQuery.extend(jQuery.validator.messages, { required: "Este campo es obligatorio.", remote: "Por favor, rellena este campo.", email: "Por favor, escribe una direccin de correo vlida", url: "Por favor, escribe una URL vlida.", date: "Por favor, escribe una fecha vlida.", dateISO: "Por favor, escribe una fecha (ISO) vlida.", number: "Por favor, escribe un nmero entero vlido.", digits: "Por favor, escribe slo dgitos.", creditcard: "Por favor, escribe un nmero de tarjeta vlido.", equalTo: "Por favor, escribe el mismo valor de nuevo.", accept: "Por favor, escribe un valor con una extensin aceptada.", maxlength: jQuery.validator.format("Por favor, no escribas ms de {0} caracteres."), minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."), rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."), range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."), max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."), min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.") });

Una vez hemos traducido los mensajes predefinidos, podramos querer mostrar mensajes personalizados o simplemente un mensaje especial para un campo concreto. jquery.validation resuelve la bsqueda del mensaje a mostrar de la siguiente forma: Primero busca si hemos especificado un mensaje para nuestro elemento a travs de javascript. Si lo encuentro, este ser siempre el mensaje mostrado. En este punto, podemos especificar un nico mensaje para todos los errores de validacin o afinar un mensaje por cada tipo de error de validacin. Segundo busca si nuestro elemento tiene definido el atributo title. Si lo encuentra, el valor del mismo ser siempre mostrado para cualquier mensaje de validacin. Por ltimo, si no encuentra mensajes desde javascript ni el atributo title, buscar en los mensajes predefinidos.

Un ejemplo de personalizacin a travs de javascript:

$().ready(function () { $("#myForm").validate({ debug: true, rules: { nombre: { required: true, minlength: 2 }, edad: { required: true, digits: true, min: 18, max: 99 } }, messages: { nombre: {

required: "Nombre es obligatorio", minlength: function (p, element) { return "Nombre tiene que ser igual o mayor que " + p; } }, edad: "Este ser el nico mensaje para edad" } }); });

Reglas y mtodos de validacin personalizados

Si no tenemos suficiente con las reglas y mtodos de validacin que incluye de serie jquery.validation, resulte muy sencillo implementar nuestra propia lgica de validacin. Por ejemplo, crearemos un regla que validar si el nombre suministrado es empleado o no de nuestra empresa. La regla de validacin la llamaremos esempleado y al mtodo de validacin le llamaremos esEmpleadoEmpresa. En la prctica, el mtodo de validacin suele llamarse igual que la regla de validacin, pero en este ejemplo las he llamado distintas para que veas que no es necesario asociar una regla y su mtodo por nombre.
// 1. DEFINIR NUESTRO MTODO DE VALIDACIN PERSONALIZADO function esEmpleadoInterno(value, element, param) { //value es el valor actual del elemento que se est validando //element es el elemento DOM que se est validando //param son los parmetros especificados por el mtodo // p. ej. en el caso de minlength="3", param ser 3 // en caso de que el mtodo no tenga parmetros, param ser true value = value.toLowerCase(); if (value == "sergio" || value == "antonio" || value == "dani") { return true; //supera la validacin } else { return false; //error de validacin } } // 2. REGISTRAR REGLA DE VALIDACIN, MTODO DE VALIDACIN Y MENSAJE POR DEFECTO $.validator.addMethod("esempleado", esEmpleadoInterno, "No eres empleado"); // 3. UTILIZAR NUESTRA NUEVA REGLA DE VALIDACIN $().ready(function () { $("#myForm").validate({ rules: { nombre: { esempleado: true } } }); });

Remote
Lo cierto es que remote es muy sencillo de entender. Simplemente delegamos la validacin de nuestro elemento en una llamada a una url (servicio web, mtodo de pgina, controlador genrico, etc.) que validar el valor en el servidor y tiene que devolver en formato JSON un true si la validacin ha tenido xito o false (o cualquier otro valor distinto de true) en caso contrario. En ASP.NET (sin importar si hablamos de WebForms o de MVC) podramos agregar por ejemplo un controlador genrico (.ashx) para llevar a cabo la tarea de validacin en el servidor.
<%@ WebHandler Language="VB" Class="Remote" %> Imports System Imports System.Web Public Class EsSergio : Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest context.Response.ContentType = "application/json" Dim js As New System.Web.Script.Serialization.JavaScriptSerializer Dim nombre As String = context.Request.QueryString.Item("nombre") If nombre = "Sergio" Then context.Response.Write(js.Serialize(True)) Else context.Response.Write(js.Serialize(False)) 'context.Response.Write(js.Serialize("No eres Sergio")) End If End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property End Class

Y el cdigo javascript para necesario sera:

$("#myForm").validate({ rules: { nombre: { remote: "EsSergio.ashx" } } });

Por defecto, remote hace una peticin GET con los parmetros nombre=valor. En cualquier caso, remote permite configurar todo lo que queremos la peticin AJAX a travs de su parmetro options.

Personalizando la validacin
En este punto veremos opciones de personalizacin de jquery.validator que nos pueden ayudar a mejorar tanto nuestra experiencia como desarrolladores como la experiencia del usuario. No pretendo poner un ejemplo sobre cada caso concreto, sino simplemente que sepas que se pueden hacer ciertas cosas y que sepas por dnde van los tiros. submitHandler nos permite especificar una funcin que se llamar cuando la validacin haya tenido xito. En este funcin podemos incluir cdigo de validacin a nivel global y adems ser responsabilidad nuestra enviar definitivamente el formulario con form.submit(). invalidHandler es una funcin que se llamar si la validacin no ha tenido xito. Con ignore podemos especificar un selector jQuery para ignorar campos de nuestro formulario. onsubmit, onfocus, onkeyup, onclick nos permiten decidir cundo se realizar la validacin. Con errorClass y validClass podemos especificar el nombre de la clase CSS que se agregar al elemento validado en caso de fracaso o de xito de la validacin. Con errorElement, errorContainer, errorLabelContainer y wrapper podemos configurar la posicin y que tipo de elementos se generarn para los mensajes de error. showErrors es una funcin que nos permite tratar con todos los mensajes de errores encontrados para visualizar de una forma concreta o realizar la operacin que creamos oportuna. errorPlacement es una funcin que nos permite decidir donde situar los mensajes de error generados. higlight y unhiglight determinan como resaltar los elementos que no han superado la validacin. Est claro que jquery.validation da para muchos post, pero en mi caso hasta aqu ha llegado mi introduccin a jquery.validation. Espero que este post te haya servido al menos para que te pique el gusanillo y a partir de ahora valides mejor y de forma ms mecnica, tus formularios. Un saludo!