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

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

Engine Validation JqueryOs 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.

Previous Partes Amistosos de Accidente de automóvil. ¿Cómo actuar en cada caso?
Next Claves para proteger y recuperar tu portátil robado.

About author

plfgavilan
plfgavilan 21 posts

Ingeniero de telecomunicaciones con casi 4 años de experiencia en la ingeniería de software. Forma parte del proyecto Borrowbits desde hace varios años, donde colabora como escritor.

View all posts by this author →

You might also like

Social Networks 1Comments

Cómo hacer fracasar una buena campaña de Marketing Online

A veces una mala gestión de la marca puede provocar un efecto contrario al deseado. El escenario típico es el siguiente: una Empresa quiere promocionarse en Internet y para ello

Tecnologia & Ciencia 2 Comments

21 Formas de hacer tu web insegura: #1 – No valides formularios en el servidor

La seguridad es uno de los aspectos mas importantes a la hora de desarrollar una web. ¿O a alguien le gustaría que un usuario malintencionado pudiera aprovecharse de ciertas vulnerabilidades

Desarrollo 1Comments

Menus Cortados en Eclipse: Ubuntu 13

Me gustaría compartir con vosotros la manera que encontré de solucionar este Bug que resulta aparecer en Eclipse, en todas sus versiones, para Ubuntu 13. Relacionado

3 Comments

    • Angel
      octubre 14, 16:54 Reply

      Hola Skant Themore, ¿qué quieres decir con que no se puede copiar? ¿Te refieres al texto adicional que se incluye al copiar? ¿O a un botón junto al código que haga un “Copiar todo”?

      Cualquier sugerencia de mejora es bienvenida :)

  1. Bitacoras.com
    septiembre 03, 19:56 Reply

    Información Bitacoras.com

    Valora en Bitacoras.com: 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, …

Leave a Reply