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:

<!-- El idioma de validationEngine -->
<script type="text/javascript" src="jquery.validationEngine-en.js"></script>
<!-- validationEngine -->
<script type="text/javascript" src="jquery.validationEngine.js"></script>
<!-- Estilos de validationEngine -->

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

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

<form id="mi_formulario">
<input id="email" type="text" name="email" >
<input id="date" type="text" name="date" >
<input id="first_name" type="text" name="first_name" >
</form>

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:

$(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();
}

Y luego llamar a ese archivo desde el head asi:

<script type="text/javascript" src="global.js"></script>

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
$(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();
}

validationEngine

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

Enlace: pagina oficial y descarga

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

11
Comenta!

avatar
Zerothrge
Zerothrge

Excelente Pos :D Me cayo anillo al dedo xD ya que tiene poco tiempo que estoy usando JQuery xD >.< Y aprobechando las ventajas de Los FrameWorks, aunque Yo uso o mas bien apenas empiezo a leer Sobre Zend xD ejej, Hablando de Frame, Cuando Programas en algun frame, y despues tienes el hosting y dominio,… la empresa a la que le rentaste el hospedaje tiene que configurar algo en su server vdd ? digo por que luego para usar algun framework es asi de… confidura el path de nose que, vete a la carpeta tal y asi ahaha

sefsinalas

Si, depende mucho de las facilidades del framework. Yo con kumbiaphp no tengo que tocar nada mas que tener habilitado el mod_rewrite de php pero eso lo tienen practicamente todos.

Rogelio Enrique

ooo okz okz xD suena bien eso xD me pondre a leer sobre KumbiaPhp, es que por ej, en los buscadores sobre Frame de php no salia kumbia por lo regular salían otros tons no me puse a investigar >.< xD

sefsinalas

Es verdad, nunca entendi porque…pero yo probe varios y mi decision final estaba entre Yii y KumbiaPHP

FG
FG

Saludos, me ha ayudado. pero en la opcion de validacion de email, como le hago si quiero que me acepte varios emails separados por (;). Por ejemplo correo1@correo.com;correo2@mail.com;prueba@prueba.com

sefsinalas

Tendrias que crear una expresion regular. Pero el plugin permite hacerlo sin muchos problemas

sefsinalas

Tendrias que crear una expresion regular. Pero el plugin permite hacerlo sin muchos problemas

Angel Hernesto Charlot
Angel Hernesto Charlot

hay alguna manera de hacer que valide con type=button para la ejecucion de una funcion … me explico

quiero que al clicker el boton de envio no se refreque la pagina si no que ejecute una funcion script , claro si todos los datos esta corectos ,

sefsinalas

La pagina no se refresca, es justamente un plugin para el lado del cliente.
Y lo que pides igual se puede hacer, el plugin tiene una accion llamada validate que se puede lanzar cuando tu quieras, como por ejemplo en el evento click de un boton cualquiera

Miguel
Miguel

Saludos, amigo no entiendo el value de los input? gracias

sefsinalas

No servian para nada, ya se los saque