JQuery Validate

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0

Siguiendo el tema de mi último post, nos adentraremos más en el mundo de jquery, en este caso analizaremos el jquery validate. Esta librería nos proporciona muchas funcionalidades útiles para validar formularios mediante javascript, de una forma más rápida, cómoda y visual para el usuario que tener que esperar a validar los datos que recibimos por post/get. Obviamente recomendamos no utilizarlo como único método de validación sino como una herramienta de filtraje antes de recibir los datos, ya que si el usuario final tiene desactivado el javascript esta validación no tendrá lugar y podría causar problemas de seguridad.

Bueno empecemos, para declarar una validación de un formulario a través de jvalidate, primero incluiremos la librería en el header:

<script src=”http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js”></script>

Y luego crearemos la siguiente función:

jQuery(“#<id_formulario>”).validate({
                …….
});

Una vez hecho esto, ahora ya rellenaremos dicha función con aquello que queramos validar, lo pondremos dentro de rules, ejemplo:

                Rules:  <id del input q queramos validar>{ <reglas>},   <id del input q queramos validar>{ <reglas>}, …

Las reglas pueden ser:

Required: (true o false)
Email: (true o false )
<metodo añadido >: (true o false )
….

Una vez definidas las rules, podemos definir los mensajes que se mostraran si alguna de esas rules no se cumplió

                Messages: <id del input q queramos validar>{ <mensaje por regla>},   <id del input q queramos validar>{ < mensaje por regla >}, …

Los mensajes por regla serán de la siguiente forma:

<id del input q queramos validar>: {
                required: “<mensaje por regla>”,
minlength: “<mensaje por regla>{0} characters”
maxlength: “<mensaje por regla>{0} characters”
email: “<mensaje por regla>” }

Hasta aquí seria lo principal, ahora podemos añadir, cuando queremos comprobar la validación del formulario, onfocusout, onclick, onkeyup, onsubmit,…

Tambien podemos añadir clases a los inputs según sean validos o no:

errorClass: “invalid”,
validClass: “success”,

Bueno, esto fue una introducción, para entenderlo mejor, os dejo aquí un ejemplo:

jQuery(“#formCreateCoupon1”).validate({
                                               onfocusout: function(element) {                   jQuery(‘input.required’).each(function() {                       jQuery(this).val();        }); },
                                               onclick: function(element) {…},
                                               onkeyup: function(element) {….                    },
                                               errorClass: “invalid”,
                                               validClass: “success”,
                                               rules: {
                                                                       eslogan:”required”,
                                                                       id_Category:”required”,
                                                                       end:{
                                                                                              required: true,
                                                                                              australianDate: true
                                                                       }
                                               },
                                               messages: {
                                                                       id_Category:{
                                                                                              required: “* This field is required”,
                                                                                              minlength: “Your description must consist of at least {0} characters”
                                                                       }
                                               }
                        });

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0
<< Post Anterior
Post Siguiente >>

Leave A Response

* Denotes Required Field