Validación de Formularios

Instalación

• 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.
• La descarga contiene todos los ficheros necesarios, incluidas las demo.
• Se pueden consultar las demos online

Pasos previos

• Para utilizar jquery.validation, agregar 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>

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

jquery.mockjax.js:

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

Métodos de validación

• Los métodos de validación implementan el código 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
• Los métodos menos habituales se encuentran en la librería de additional_methods
• Siempre es posible agregar a jquery.validation nuestras propias validaciones personalizadas. Lo suyo sería hacerlo directamente en el additional_methods para evitar excesivos request.
• Por ejemplo, un método de validación sería el código necesario para validar que las entradas de algunos campos sean numérica.

Reglas de validación

• Permiten asociar un elemento de nuestro formulario a uno o más métodos de validación.
• ¿Cómo asociar reglas de validación con elementos?

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. Por ejemplo <input type=”text” minlength=”3”>, especifica que el contenido de nuestra caja de texto no debería ser menor a 3 caracteres.
No es recomendable por la validación de nuestras páginas.

A través de código javascript y añadiendo las reglas a través del objeto rules.

Reglas y métodos de validación personalizados