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.