Usuario:Juanda/jQuery/Plugins

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

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

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.
 * Con atributos personalizados que requieren parámetros:
 * 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.
 * 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

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
 * Deberíamos definir el los settings del plugin el objeto messages (de forma parecida a como se hace con el objeto rules):


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


 * Nuestro html quedaría así:

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.

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:
 * Se asocia la tabla con el plugin mediante la llamada al método dataTable.

Funcionamiento más avanzado

 * El método DataTables puede recibir parámetros:
 * 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.