AddThis Social Bookmark Button

jQVP Logo gr

Ultimamente esto de las validaciones jQuery es la onda; la tarea de nostros es dar las soluciones al cliente y que a su vez sea de facil implementación para nosotros;

Eh estado utilizando un rato este plugin y cada vez me convence más y más, pues bien las ventajas aparte de una facil configuración, es la personalización tanto de objetos como de mesajes para mostrar en caso de error;

Si quieres ir directo a la página del validador y leerte la documentación porque eres muy atrevido y puedes hacer todo aquí esta la url:

http://jqueryvalidation.org/

Para quienes han decidido leer más, les dire la forma basica de implementación y algo que es muy pero muy buscado, el cambio de mensajes;

Primero veamos como se utiliza; y para esto decimos que va así:

$("#mi_formulario").validate();

Aquí es cuando dices, y luego ?,  #puesyaesta !,  dejando la validación por default retomara las validaciones basicas del html5, dadas las etiquetas; como pudieran ser los casos de:

  1. required
  2. email
  3. url
  4. number
  5. phone

Si muy chulo estará, pero si vamos a profundizar podriamos extender la funcionalidad, dandole mas parametros a validar, en este caso seriamos ayudados de una sintaxis un poco interesante;  nuestro punto de partida será el  name="" de cada campo que pongamos; ya que si no te fias, utiliza el name y el id con el mismo valor, veamos pues:

Vayan practicando:

$("#mi_formulario").validate({ rules:{ nombre:{ required:true } } });

Con esta sintaxis, ya extendemos la funcionalidad de la validación,  al input que se llame nombre, le decimos que sera requerido, pero tambien podemos agregar mas validaciones dentro del mismo parametro como son:

  • required
  • remote
  • email
  • url
  • minlength
  • maxlength
  • date
  • dateISO
  • number
  • digits
  • min
  • max
  • entre otros....

Y cual es lo bonito entonces ?,  pues que uno decide cuales poner y de una forma tan simple como declararlos true, ya esta!;

En la documentación del plugin veran mas formas de agregar validaciones, incluso se pueden utilizar classes, grupos de clases y asi;

Pero..... y como puedo saber si funciona o no?;  pues si van a ocupar una validación extra que si el formulario es valido o no se hace de la siguienta manera:

$().validate().valid();

Verdad que no es nada dificil?, esto lo pueden imprimir con un console.log( ), antes de tomar la desicion a utilizar una vez validado el formulario; la respuesta será un true ó false, dependiendo si es valido o no;

Por ultimo en esta nota, la forma de cambiar los mensajes de error:

 Les dejare el script tal cual es, solo modifiquenlo a su gusto, y esto va antes de que hagan la validación, al inicio de su script de preferencia:

jQuery.extend(jQuery.validator.messages, {required: "This field is required.",remote: "Please fix this field.",email: "Please enter a valid email address.",url: "Please enter a valid URL.",date: "Please enter a valid date.",dateISO: "Please enter a valid date (ISO).",number: "Please enter a valid number.",digits: "Please enter only digits.",creditcard: "Please enter a valid credit card number.",equalTo: "Please enter the same value again.",accept: "Please enter a value with a valid extension.",maxlength: jQuery.validator.format("Please enter no more than {0} characters."),minlength: jQuery.validator.format("Please enter at least {0} characters."),rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."), range: jQuery.validator.format("Please enter a value between {0} and {1}."),max: jQuery.validator.format("Please enter a value less than or equal to {0}."),min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")});

Leave your comments

0
  • No comments found