Jquery Validate: validar email, check box, select box y números en formulario

Enviado por Carxl el Mié, 08/25/2010 - 23:14.

Mostraré un ejemplo de como validar un campo email, check box, select box y números en un formulario con Jquery Validate.

Una de las cosas que menos me gusta programar, es validar lo que el usuario ingresa desde un formulario. Todos sabemos lo importante que es hacerlo, pero no quita lo cansón que es :S Jquery Validate es un plugin que facilita esta tarea.

Para comenzar, es importante:

1. Descargar jquery

2. Descargar jquery validate

3. Realizar el formulario:

	
	
	
Datos Personales

Seleccione deportes

4. Realizar el código de validación:

$(function(){
       $('#formInscripcion').validate({
           rules: {
           'nombre': 'required',
           'apellido': 'required',
           'numero_identidad': { required: true, number: true },
           'email': { required: true, email: true },
           'tipo_identidad': 'required',
           'deportes[]': { required: true, minlength: 1 }
           },
       messages: {
           'nombre': 'Debe ingresar el nombre',
           'apellido': 'Debe ingresar el apellido',
           'numero_identidad': { required: 'Debe ingresar el número de documento de identidad', number: 'Debe ingresar un número' },
           'email': { required: 'Debe ingresar un correo electrónico', email: 'Debe ingresar el correo electrónico con el formato correcto. Por ejemplo: u@localhost.com' },
           'tipo_identidad': 'Debe ingresar el número de documento',
           'deportes[]': 'Debe seleccionar mínimo un deporte'
       },
       debug: true,
       /*errorElement: 'div',*/
       //errorContainer: $('#errores'),
       submitHandler: function(form){
           alert('El formulario ha sido validado correctamente!');
       }
    });
});

Para este artículo colocamos los códigos en un mismo archivo.

Una breve explicación

Esta línea:

$('#formInscripcion').validate({
});

Es la que inicializa el plugin Jquery validate para el formulario con id formInscripcion.

Luego encontraremos esta línea

rules: {},

Dentro de las llaves encontraremos las todas las posibles reglas que queramos formar.

Para conocer todas estas reglas, es bueno revisar la documentación de Jquery Validate sobre los métodos de validación.

Si observamos, veremos que hay 4 validaciones principales:

  1. Valido que todos los campos sean obligatorios (método required)
  2. Valido que el campo numero_identidad sea numérico (método number)
  3. Valido que el campo email tengo un formato de correo electrónico (método email)
  4. Valido que seleccionen al menos 1 check box en el combo "Seleccione Deporte" (método minlength)

Luego, esta línea

messages: {},

Es la que nos permite personalizar los mensajes de error por los campos que tengamos. Observen que por cada método de validación se puede colocar un mensaje respectivo. Si no se personalizan los mensajes, es decir si obviamos la línea messages, el idioma por defecto para los mismos será inglés.

La idea es ir probrando el código poco a poco para familiarizarse más fáci y rápido con éste plugin.

Espero les sirva!! Wink

Hasta la próxima.

AdjuntoTamaño
jvalidate.zip55.96 KB

nnnnnnnn pues, muy bueno, no

Enviado por lio (no verificado) el Jue, 08/26/2010 - 00:42.

nnnnnnnn pues, muy bueno, no conocia esa extension para JQ para trabajarlo manualmente....ya que creo el el DW implementa JQ tambien para validar los controles Spry no?... o Spry es un framework independiente a JQ?

Ta bueno! Gracias.

Enviado por Happy (no verificado) el Jue, 08/26/2010 - 09:53.

Ta bueno!

Gracias.

Claro Lio, lo que llama la

Enviado por Carxl el Vie, 08/27/2010 - 09:53.

Claro Lio, lo que llama la atención es lo simple y poderoso del plugin. Cuando ya lo usas varias veces (cuando coges práctica), validas un form "mediano" en 3, 5 min y aprovechando la confiabilidad que produce Jquery.

Saludos.

gracias fue de gran ayuda!!

Enviado por nestor (no verificado) el Mar, 10/18/2011 - 18:13.
gracias fue de gran ayuda!! exelente

Thanks !

Enviado por Anónimo (no verificado) el Mié, 10/19/2011 - 15:07.
Thanks !

excelente amigo...justo lo

Enviado por Ñahuincopa (no verificado) el Mar, 01/17/2012 - 12:05.
excelente amigo...justo lo que estaba buscando

Que bueno que les

Enviado por Carxl el Mié, 01/18/2012 - 10:37.
Que bueno que les sirva. Saludos!

tiene un error, no valida

Enviado por anonimus (no verificado) el Mié, 02/08/2012 - 18:14.
tiene un error, no valida correctamente la extención

Spry funciona con prototype

Enviado por osvaldo (no verificado) el Sáb, 02/11/2012 - 19:34.
Spry funciona con prototype

Hola!!!! Como Hago para que

Enviado por Caro (no verificado) el Vie, 09/28/2012 - 09:42.

Hola!!!!

Como Hago para que la función solo me sirva para el botón guardar en mi proyecto de asp .net


Hola!!!, Como puedo hacer

Enviado por Caro (no verificado) el Vie, 09/28/2012 - 10:16.

Hola!!!,

Como puedo hacer para que me valide desde un solo botón en asp .net, ya que en el formulario tengo más de un botón y no quiero que me valide todos.

Gracias

Hola!!!, Como puedo hacer

Enviado por Caro (no verificado) el Vie, 09/28/2012 - 10:16.

Hola!!!,

Como puedo hacer para que me valide desde un solo botón en asp .net, ya que en el formulario tengo más de un botón y no quiero que me valide todos.

Gracias

Que tal? Dime en sí qué

Enviado por Carxl el Vie, 09/28/2012 - 22:07.

Que tal? Dime en sí qué necesitas y podemos verlo. Pero en síntesis, es sólo tener un botón tipo submit.

Excelente ayuda, pero no

Enviado por Anónimo (no verificado) el Mar, 05/28/2013 - 18:14.

Excelente ayuda, pero no puedo enviar la informacion del FORM para grabarla en la BD (mysql) ..

en el ejemplo sale solo un ALERT

submitHandler: function(form){
alert('El formulario ha sido validado correctamente!');
}

Pero en la documentacion del codigo, sale que para enviar el FORM se debe colocar:

submitHandler: function(form){
form.submit();
}

Pero me sale un error y despues no me deja capturar la info para guardarla...alguna idea? (mi codigo esta en PHP)

Enviar un comentario nuevo

  • Saltos automáticos de líneas y de párrafos.

Más información sobre opciones de formato

CAPTCHA
Esta pregunta se hace para comprobar que es usted una persona real e impedir el envío automatizado de mensajes basura.
CAPTCHA de imagen
Enter the characters shown in the image.