Validación de formularios con Jquery Engine: Instalación y cómo usarlo en 5 minutos

Os presento este simpático plugin de Jquery que os permitirá realizar validaciones en el cliente de una manera muy sencilla y rápida. Puesto que aun las validaciones HTML5 no tienen soporte total en todos los navegadores, puede veniros bien echar mano de esta herramienta, vayamos al grano:

Para instalarlo sólo tenemos que incluir los siguientes archivos js en nuestro código HTML:

<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet"href="css/validationEngine.jquery.css"type="text/css"/> 

El siguiente paso será activar la validación en nuestro formulario:

$("formulario").validationEngine();

Con esto tenemos las validaciones activadas, pero nos queda lo mas importante, definir cómo hay que validar cada campo. Para esto lo único que hay que hacer es añadir una clase especifica al input:

<input type="text" class="validate[required,custom[email]]">

Pero, es mejor que lo hagas todo sencillo y modular. No metas a pelo las clases en el código HTML. Hazte un fichero js independiente, y usa Jquery para añadir las clases y poder así editar y añadir las validaciones muy fácilmente:

#validaciones.js
$("formulario").validationEngine();
$('#email').addClass("validate[required,custom[email]]");
$('#nombre').addClass("validate[required]");

Se que parece magia, pero espera. ¿Como hacer «cosas» en caso de que algo valide o no valide?

var valida = $('form').validationEngine('validate');

Esta variable de tipo booleano te dirá si tienes validado el formulario, con lo cual podrás utilizarla para cambiar el comportamiento de cualquier elemento en función de esta condición, como por ejemplo desactivar un botón de siguiente o algo por el estilo.

Obviamente, hay más. Pero entonces esto no sería «validación de formularios en 5 minutos». Puedes echar un ojo a toda la documentación que puedes descargar junto con el plugin desde este repo con git https://github.com/posabsolute/jQuery-Validation-Engine

PS: Recordamos, las validaciones en el cliente no son suficiente para proteger nuestras aplicaciones. Para esto hemos de usar validaciones en el servidor. Las validaciones en el cliente tienen como principal objetivo mejorar la experiencia del usuario, puesto que son mucho mas rápidas, pero son muy fáciles de vulnerar.

¿Tienes dudas? ¿Usas algún plugin que te parezca mucho mas potente? Gracias y espero que os haya servido de ayuda.