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 poder usar el plugin deberemos añadir las siguientes líneas en nuestros scripts:

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

• “Write less, do more” (escribe menos, haz más)
• Funcionalidad:

Selección y manipulación de elementos HTML y CSS

Funciones de eventos en HTML

Efectos y animaciones de JavaScript

AJAX

Compatibilidad con todos los navegadores

…

Primer ejemplo

• Versión actual de jQuery: 1.10.2 y 2.0.3
• Licencia MIT
• La funcionalidad es la misma
• La rama 2.x no es compatible con IE 6-8
• La rama 2.x es algo más ligera
• Usaremos la rama 1.x:

Misma funcionalidad

Mayor compatibilidad

Mensajes de error

• Versión de producción:

Minified y comprimida

Aproximadamente 90KB

• Versión de desarrollo:

Sin comprimir

Aproximadamente 3 veces más pesada, en torno a 270KB

• La rama 2.x pesa un 10% menos, resulta inapreciable

• Se puede descargar de la web de jQuery

• Versión de producción:

	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

• Versión de desarrollo

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

Reglas y métodos de validación personalizados