Last Updated:

Validar un formulario con Jquery usando validationEngine

Validar formularios es clasico en cualquier desarrollo serio, yo solia hacerlo del lado del servidor con las facilidades que KumbiaPHP ofrece para ello, hasta que descubri hace poco validationEngine. Que basicamente permite validar(verificar que los datos ingresados seran correctos) un formulario en el lado del cliente. Lo cual es obviamente una ventaja desde el punto de vista del cliente pues se ahorra una recarga de pagina.

Por otro lado siempre es recomendable seguir validando "tambien" del lado del servidor por una cuestion de seguridad.

Usarlo es muy simple, primero lo bajamos(enlace al final del post) y debemos incluir 3 archivos en las cabeceras de la paginas donde queramos usarlo:

[html][/html]

Y por supuesto que si tienen jquery tambien deben agregarlo...aunque es poco probable que no lo esten usando ya :P

Y vamos a suponer que tenemos el siguiente formulario en alguna pagina:

[html]

[/html]

Lo normal seria hacer validaciones inline agregando una clase a cada input y tambien instanciar validationEngine con un pequeño codigo jquery pero con eso solo logramos que la pagina se vaya sobrecargando de codigo y poco a poco volviendose ilegible, en especial cuando son formularios muy largos. Lo que les voy a recomendar es crear un archivo llamado global.js y dentro colocar el siguiente codigo:

[javascript] $(document).ready(function(){ $('#mi_formulario #email').addClass('validate[required]'); $('#mi_formulario #date').addClass('validate[required]'); $('#mi_formulario #first_name').addClass('validate[required]');

$("#mi_formulario").validationEngine(); } [/javascript]

Y luego llamar a ese archivo desde el head asi:

[html][/html]

Con eso se agregan las clases por si solas a cada input y de paso tambien instanciamos validationEngine para que funcione con el formulario que le indicamos.

Pero con eso solo logramos que cada campo deba ser llenado antes de ser enviado, pero si ademas queremos hacer mas rigurosa la verificacion de tipos o formatos este plugin nos brinda muchas facilidades para ello. Por ejemplo, con el siguiente codigo en el archivo global.js verificaremos que:

  • email tenga formato de email
  • date tenga el formato tipo fecha
  • first_name tenga al menos 4 letras

[javascript] $(document).ready(function(){ $('#mi_formulario #email').addClass('validate[required,custom[email]]'); $('#mi_formulario #date').addClass('validate[required,custom[date]],'); $('#mi_formulario #first_name').addClass('validate[requiredminSize[4]]');

$("#mi_formulario").validationEngine(); } [/javascript]

validationEngine

Los mensajes de error se pueden personalizar pero los que vienen por defecto estan bastante bien.

Enlace: pagina oficial y descarga