Validación de Formularios

Consideraciones previas

Se debe hacer validación tanto en cliente como en servidor.
Validación en el servidor: para evitar prácticas maliciosas como sql injection
Validación en cliente: por usabilidad. Tiempos de respuesta muy rápidos y liberación de trabajo al servidor.

Elección del plugin

Localizar el plugin más adecuado para la validación de formularios desde la lista de plugins de la web de jQuery
Elegimos jQuery Validation por ser el más antiguo y popular de todos.

Requerimientos Instalación

Ojo con las dependencias: jQuery, tested with 1.6.4, 1.7.2, 1.8.3, 1.9.0
En principio trabajaremos con la última versión de jQuery aunque no esté testeada.
Se pueden consultar las demos online, aunque la descarga del plugin también las incluye.

Estructura del plugin

Directorio dist:

Se encuentran los scripts propios de validación.

Hay versión de desarrollo y versión de producción

El fichero additional_methods.js tiene librerías adicionales de validación, las menos habituales.

Directorio lib:

Librerías útiles, como distintas versiones de jQuery (necesarias para el correcto funcionamiento del plugin).

jquery.forms.js: Script para habilitar ajax de forma transparente en los formularios.

jquery.mockjax.js: Script para simular peticiones y respuestas de ajax.

Directorio localization:

Ficheros de traducción de los mensajes del plugin.

Habrá que utilizar el de español en nuestros desarrollos.

Directorio demo:

Útil echarle un ojo, nos puede servir de ayuda para implementar nuestras soluciones.

Cargar el plugin

Para utilizar jquery.validation, será necesario agregar previamente referencia a las librerías jQuery y jquery.validation:

<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>

html en formularios

Cada input del formulario lleva un label asociado
El atributo for del label hace referencia al id del formulario
El atributo name es necesario para el funcionamiento del plugin del formulario y es el que se utiliza en el lado del servidor (al construir la url en una petición con GET por ejemplo).
Normalmente el atributo name y el atributo id suelen tener el mismo valor

<label for="firstname">Firstname</label>
<input id="firstname" name="fname"/>

Métodos de validación

Los métodos de validación son el código javascript necesario para validar los elementos.
De serie tenemos disponibles un número considerable de métodos de validación para las comprobaciones más habituales.
Por ejemplo, un método de validación sería el código necesario para validar que las entradas de algunos campos sean numéricas.
Todos los métodos de validación dan por buenos campos vacios salvo los métodos required y equalTo.

Métodos de validación estándar

required – Campo requerido
remote – Se solicita un recurso para chequear validez (ej. usuario que no esté ya en uso)
minlength y maxlength, rangelength – Longitud del campo.
min, max, range – Valor mínimo, máximo y rango
email – correo electrónico válido
url – url válida
date – fecha
dateISO – fecha ISO
number – Número decimal
digits – Solo digitos
creditcard – Tarjeta de crédito
equalTo – Valor igual a

Añadir métodos de validación

Siempre es posible agregar a jquery.validation nuestras propias validaciones personalizadas.
Los métodos menos habituales se encuentran en la librería de additional_methods para que el script de validación pese menos.
No crees varios ficheros de additional_methods para evitar excesivos request y tener una carga de página óptima.
Se utiliza la función: jQuery.validator.addMethod()
Consulta la API de jQuery Validation para obtener más información

Reglas de validación

Permiten asociar un elemento de nuestro formulario a uno o más métodos de validación.
Existen varias formas para implementar las reglas de validación que no son excluyentes entre sí. Podemos mezclaras si nos conviene.

Mediante el uso de metadatos

A través de nombres de clases css en atributo class.
class=”required number” especifica que nuestro elemento será requerido y sólo aceptará números.
Estos nombres de clases no tienen por qué existir en tu hoja de estilos, son clases que utilizará sólo jquery.validation.

<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>

Con atributos personalizados que requieren parámetros:

<input type=”text” minlength=”3”>

Especifica que el contenido de nuestra caja de texto no debería ser menor de 3 caracteres.
No es recomendable por la validación de nuestras páginas.

Mediante settings del plugin (opción rules)

A través de código javascript y añadiendo las reglas a través del objeto rules.
El código queda más limpio pero a veces es más complicado si usamos un framework web.

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

El método validate que se asocia al formulario, permite un paso de parámetros vía json: {parametro1: valor, parametro2: valor...}
El parámetro rules define para los elementos del formulario que aparecen listados, las reglas de validación que van a tener que cumplir.

Uso de comillas para parámetros no válidos como variables de JavaScript

$("#myform").validate({
   rules: {
     // no quoting necessary
     name: "required",
     // quoting necessary!
     "user[email]": "email",
     // dots need quoting, too!
     "user.address.street": "required"
   }
 });

Refactorizar reglas

Si tenemos varios campos con las mismas reglas y mensajes, podemos refactorizar reglas para reducir el código
Ejemplo: Tenemos varios campos que necesitan tanto required como un minlength de 2

<input name="customer1" class="required" minlegth="2"/>
 <input name="customer2" class="required" minlength="2"/>
 <input name="customer3" class="required" minlegth="2"/>

Deberíamos definir el los settings del plugin el objeto messages (de forma parecida a como se hace con el objeto rules):

 messages: {
                customer1: {
                    required: "Es necesario que escribas el nombre del cliente",
                    minlenght: "Este campo tiene que tener al menos {0} caracteres"
                },
                customer2:
                  .....
            }

Creemos una regla de validación nueva "a nuestra medida" utilizando addMethod y addClassRules.

// añadimos métodos nuevos en base a los existentes pero con otro mensaje:
 $.validator.addMethod("cRequired", $.validator.methods.required,
   "Es necesario que escribas el nombre del cliente");
 $.validator.addMethod("cMinlength", $.validator.methods.minlength,
    $.format("Este campo tiene que tener al menos {0} caracteres"));
// {0} se reemplazará por el número de caracteres definidos en el parámetro de cMinlength
 //Creamos una regla de validación como combinación de ambos métodos:
 $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });

Nuestro html quedaría así:

<input name="customer1" class="customer"/>
 <input name="customer2" class="customer"/>
 <input name="customer3" class="customer"/>

$("#myform").validate({
   rules: {
     // no quoting necessary
     name: "required",
     // quoting necessary!
     "user[email]": "email",
     // dots need quoting, too!
     "user.address.street": "required"
   }
 });

Mensajes de error

Aparecen al validar un formulario, si los campos no son válidos
El mensaje de error viene se puede personalizar mediante los settings del plugin
Si no existe, se obtiene del title del elemento
Si tampoco existe, utilizaremos los mensajes por defecto

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 validación.

errorElement, errorContainer, errorLabelContainer y wrapper

Podemos configurar la posición y que tipo de elementos se generarán para los mensajes de error.

showErrors

Es una función que nos permite tratar con todos los mensajes de errores encontrados para visualizar de una forma concreta o realizar la operación que creamos oportuna.

errorPlacement

Es una función que nos permite decidir donde situar los mensajes de error generados. higlight y unhiglight determinan como resaltar los elementos que no han superado la validación.

Personalizando la validación

submitHandler

Nos permite especificar una función que se llamará cuando la validación haya tenido éxito.
En este función podemos incluir código de validación a nivel global.
Será responsabilidad nuestra enviar definitivamente el formulario con form.submit().

invalidHandler

es una función que se llamará si la validación no ha tenido éxito.
Con ignore podemos especificar un selector jQuery para ignorar campos de nuestro formulario.

onsubmit, onfocus, onkeyup, onclick

Nos permiten decidir cuándo se realizará la validación.

Datagrid

Introducción

Un componente esencial en una aplicación web es el datagrid.
Hay muchas opciones diferentes, nos centraremos en plugins que funcionen sobre jQuery, para seguir la dinámica del curso:

Flexigrid

jqGrid

DataTables

Elegimos DataTablas debido a:

Excelente documentación: ejemplos de uso, foro

Versatilidad: funcionamiento en cliente o cliente-servidor

Aspecto visual: posibilidad de integrarlo con jQueryUI o con Twitter Bootstrap (que veremos más adelante en el módulo de Diseño de Interfaces Web).

Funcionamiento básico

Necesitamos un documento html que contenga una tabla.
Se carga el script de jQuery
Se cargan los ficheros del plugin de DataTables:

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

Se asocia la tabla con el plugin mediante la llamada al método dataTable().

     <script type="text/javascript" charset="utf-8">
	  $(document).ready(function() {
		$('#miTabla').dataTable();
	  } );
     </script>

Funcionamiento más avanzado

El método DataTables puede recibir parámetros:

	$(document).ready(function() {
		$('#example').dataTable( {
			"aaSorting": [[ 4, "desc" ]]
		} );
	} );

En el caso anterior ordenará por la cuarta columna y de modo descendente
Realmente recibe un solo parámetro que es un json, muy similar al plugin de validación que acabamos de ver.
La mejor forma de ver como personalizar nuestro DataTables es ver los distintos ejemplos que abarcan todas las posibilidades del plugin.

Curso de jQuery-Introducción

Contenido