Lluís Ulzurrun de Asanza Sàez

Valida formularios con jQuery

Beware: This post was published 5 years ago and its content may be outdated.

Cuando tenemos que validar los datos de un formulario podemos recurrir a Javascript y crear nuestra función de validación, pero también podemos recurrir a jQuery para validar el formulario de forma rápida y sencilla.

Para esto descargarmos jQuery y el plugin Validate.

Pasos previos

En el header del archivo que contiene el formulario añadimos:

 

A continuación añadimos:

Para distinguir el formulario al que se le aplica la validación, jQuery busca el que tenga por id formulario. Podemos cambiar #formulario por #loquesea, siendo loquesea la id del formulario.

El código HTML del formulario puede ser una cosa así:

Nombre: Contraseña: Repite contraseña: Email:

Ahora tenemos que definir qué campos necesitan validación, para ello disponemos de dos métodos:

  1. Ponerle una clase específica a cada input, por ejemplo, class=”required” harí que el campo fuese obligatorio.
  2. Definir los campos que requieres validación y qué tipo de validación requieren en el código Javascript que hemos añadido al principio.

El método de las clases

Comencemos por el primer método: añadiendo clases a los campos del formulario.

Si queremos que todos los campos sean obligatorios basta con añadirles a todos class=”required”, ahora si dejamos en blanco un campo con esta clase nos mostrará un aviso.

Si le ponemos de clase “email”, buscará la estructura de una dirección de correo electrónico, en casi de no ser una estructura correcta ([email protected]), mostrará un aviso.

Podríamos dejar así el formulario anterior:

Nombre: Contraseña: Repite contraseña: Email:

El método de la definición

El segundo método es un poco más complejo. Volvemos al punto en el que añadimos:

Ahora en lugar de esto debemos añadir:

¿Cómo funciona?

Bien, después de rules:{ añadimos el id del campo de nuestro formulario seguido de las reglas que debe cumplir.

En este ejemplo el campo pass_2 es obligatorio, y además debe ser igual a pass_1, si no lo es mostrará un aviso.

Podemos añadir más reglas, como caracteres máximos, rango de caracteres (sólo para número enteros), fechas, etc, podéis ver una lista de todas las reglas aquí.

Ambos métodos son compatibles, podemos usar los dos en el mismo formulario.

Cualquier duda que tengáis no dudéis en preguntarla en los comentarios, espero que os sea útil.

41 Responses to Valida formularios con jQuery

cesar ‐ 5/11/2009 0:36

Hola interesante el aporte podrias poner todas las funciones de la

Excelente aportación!. Es justo lo que necesitaba!

Un saludo!. :-)

jhony penagos ‐ 20/3/2010 22:42

(Y) hola amigo, tengo una duda. necesito enviar los datos a BD, pero el evento del boton para enviar lo controlo con jquery, entonces necesito saber como hago para saber si la validacion es true o false para asimismo proceder a enviar los datos … ?? gracias men

Controlando el evento de pulsar el botón enviar supongo que deberías usar AJAX, disculpa que no sea más específico, pero es que no sabría decirte cómo hacerlo.

Yo optaría por usar el método de clases CSS que hay explicado en el artículo y dejaría que el botón de enviar el formulario funcionase como de costumbre, de modo que la página de destino del formulario reciba los datos validados y los pueda añadir a la DB.

GokuH ‐ 11/5/2010 8:04

Muy buen tutorial! me sirvio para comenzar y guiarme en adelante,

para jhony penagos:

el siguiente metodo : $("#formulario").valid() te devuelve si el formulario esta valido o no!.

Agregar que si se esta usando un formulario con AJAX seria bueno agregar este metodo para validad el click directamente:

$jq(':submit').click(function(e) {

if ($("#datosUsuario").valid()){

console.log ('Es Valido');

} else {

console.log ('no es valido');

return false;

}

});

Como pueden observar si es valido simplemente no hace nada porque el comportamiento por defecto es realizar el submit, en cambio si no es valido simplemente no permite el submit, aki bien podrian agregar un mensaje o dejar el comportamiento por defecto del plugin que es mostrar un etiketa al rededor del campo con el error.

Gracias por el tutorial.

¿Sabes cómo añadirle CSS a las alertas? Me salen en negro y no me gustan :(

Creo que las alertas tienen como como clase "error", así que algo como label.error { } o .error { } directamente deberían de darle estilo.

Perfecto! Gracias :D

Franklyn Ortega ‐ 10/8/2010 3:43

Excelente Aporte, alguien sabe como personalizar los mensajes de error? a mi me salen en ingles…

La verdad es que aún no he usado este script en ningún proyecto, pero revisando las demos he encontrado el siguiente código que puede darte una idea de cómo hacerlo:

[javascript]

$("#captchaform").validate({

rules: {

captcha: {

required: true,

remote: "process.php"

}

},

messages: {

captcha: "Correct captcha is required. Click the captcha to generate a new one"

},

submitHandler: function() {

alert("Correct captcha!");

},

success: function(label) {

label.addClass("valid").text("Valid captcha!")

},

onkeyup: false

});

[/javascript]

jfableon ‐ 4/9/2010 6:56

Sumolari:

Excelente tutorial para iniciarse en este plugin para jquery, te felicito, sencillo y bien explicado.

Después de esto se puede ir a la página
http://docs.jquery.com/Plugins/Validation#Options
y ver la documentación para profundizar más.

Franklyn Ortega:

En el archivo del plugin jquery.validate.js, existe una variable array llamada messages, solo hay que cambiar los valores por la traducción correspondiente.

Es un proyecto un poco avanzado vale la pena descargarlo y ver la aplicacion en funcionamiento, el sistema tiene dos listas la cual cuando se selecciona un PAIS en el otro select apareceran las ciudades de este pais, ademas de esto podemos ingresar paises, ciudades, borrar paises, borrar ciudades todo de forma ASINCRONICA con JQUERY, php, mysql y un poco de ajax. espero el proyecto sea de su total agrado pueden ver la aplicacion en funcionamiento aqui: http://www.getvay.com/SeleccionAvanzado/index.php la pueden descargar aqui: http://www.getvay.com/pg/file/macs1407/read/1792/… y por cierto con respecto a la validacion en ejemplo en funcionamiento de lo que acabo de postear hay otras 3 aplicaciones, muro de facebook, validacion y registro con jquery y lo gin de twitter espero les sea de ayuda (H)

Como puedo validar una matriz de input generados dinamicamente con esto?

Supongo que tendrás que generar dinámicamente el código JS para validar.

como hago eso sumolari tienes algun link ?

Gracias de antemano

Lo siento pero no tengo ningún link ni sé realmente cómo hacerlo, era sólo una idea que se me había ocurrido. Soy un novato en Javascript así que no puedo darte más que ideas (algunas de las cuales serán además estúpidas).

Te recomiendo que preguntes en algún foro como Foros del Web, donde hay usuarios con muchos más conocimientos.

Hola! excelente explicacion, una consulta, como puedo agregar los mensajes que retorna en un div??

Gracias!

La verdad es que no sé cómo hacer que los mensajes de error que devuelven se junten todos en un div diferente a los que utiliza por defecto, pero revisando la documentación he encontrado este ejemplo que te muestra un recuento de errores al principio del formulario:

[php]

$(".selector").validate({

invalidHandler: function(form, validator) {

var errors = validator.numberOfInvalids();

if (errors) {

var message = errors == 1

? 'You missed 1 field. It has been highlighted'

: 'You missed ' + errors + ' fields. They have been highlighted';

$("div.error span").html(message);

$("div.error").show();

} else {

$("div.error").hide();

}

}

})

[/php]

Lo he encontrado aquí, así que revisa la página por si está lo que buscas.

JOSE ARMANDO ‐ 7/11/2010 7:24

excelente informacion

s no es mucho pedir podrian darme un link donde bajar un manual de jquery..ç

es q apenas esto aprendiendo y necesito conocer desde el principio hasta donde dios me o permita

GRACIAS…………….

Yo la verdad es que sé bien poco de Javascript, pero lo poco que sé lo he aprendido buscando tutoriales en Google. Sobre Jquery, lo único que te puedo recomendar aparte de buscar tutoriales en Google es revisar la documentación y las demos, en muchos casos son bastante fáciles de entender.

¡Suerte!

Mario ‐ 3/12/2010 18:32

Si quiero que se valide si un campo esta vacio sirve esto? He estado mirando los parametros que tiene y no doy con uno que verifique que si la caja de texto esta vacia salte el error.

¿Has probado con "required: true"? Ahora mismo no recuerdo exactamente si era ése su cometido, pero tiene toda la pinta de hacer que un campo no sea opcional y por tanto requiera algún contenido.

Prueba a ver si es así.

talaman ‐ 14/12/2010 20:35

excelente, muy bien explicado, simple

viringas ‐ 15/2/2011 12:10

hooola! antetodo gracias por esta fenomenal aportacion ya que me encuentro haciendo una web y estas funciones me ayudan a ahorrar bastantes lineas de codigo, pero cuando copio casi tal cual tus lineas, excepto q yo tengo

rules: {

usu: {

required = true;

pass: {

required = true,

}

}

ya que yo necesito q no sean vacios los dos campos, pero me da un error de sintaxis en el primer required = true

gracias de antemano!

un saludo!

viringas ‐ 15/2/2011 12:31

hola de nuevo, consegui arreglar los errores de sintaxis, pero cuando visualizo la pagina me borra todos los divs q tengo con la foto del titulo y la etiqueta nav , el include del plugin y el codigo de validacion se hacen ambos en el head no? xq el include de la libreria de jquery yo la tengo en el head, ahora mismo estoy algo perdido con jquery y todas sus funciones, y me interesaria mucho saber como se pueden utilizar ya que ahorran bastante codigo.

gracias de nuevo

saludos

Seguramente el problema estará en parte del código ajena a este tutorial.

Te recomiendo que si no consigues solucionar tu problema preguntes en algún foro, como Forosdelweb, donde hay muchos más que te podrán ayudar a solucionar tu problema.

Mario ‐ 20/2/2011 23:38

El validate esta incompleto tiene muchos errores e incompatibilidad con los navegadores es una perdida de tiempo trabajar con ello, no recomendable…

viringas ‐ 4/3/2011 13:25

hola a todos, tengo el siguiente formulario y nose como utilizar el validate para hacer q me avise de q no sean campos vacios

Usuario:

Contraseña:

tengo puesto el codigo javascript y la class required pero no hay manera de q funcione nose si hago yo algo mal (q puede ser) pero no consigo q funcione,

gracias x las posibles soluciones

Te recomiendo que pongas el enlace a la página donde estás teniendo problemas, porque el sistema de comentarios borrará todas las etiquetas HTML que uses (si no están en la lista de las permitidas).

EDUARDO ‐ 11/4/2011 2:34

Me urge cambiar el tamaño de la letra y el color de los mensajes. ayuda por favor!

;-(

Prueba usando como selector en tu CSS label.error o .error.

Sino con el inspector de código de tu navegador (suponiendo que tu navegador tenga inspector de código) puedes averiguar la clase de cualquier elemento de la página.

Excelente validador. Yo cambie los mensajes de error a español modificando la seccion 'messages' del archivo jquery.min.js donde están los mensajes en ingles los cambié a español.

seitan ‐ 5/5/2011 10:41

Buenas sumolari, un aporte muy bueno pero he tenido un problemilla. Lo he copiado casi tal cual lo has puesto pero luego a la hora de pinchar en enviar me dice que la contraseña repetida no es igual. Se te ocurre algo por lo que pueda ocurrir esto?

Gracias de antemano

YeisonSoto ‐ 7/8/2011 19:26

Hay alguna forma de que si se cumplen todas las reglas se envien los datos del formulario y si no pues muestre los mensajes pero no se envien???

$(“#form1″).validate({

rules: {
txtidestudiante: {
required: true,
digits: true
}
}
if(){
//si las reglas se cumplen haga envie datos

}else{

sino pues q no se envien

}

});

Si te fijas en las demos, verás que establece la función que se utiliza para manejar el formulario una vez enviado con el siguiente código:

[js]
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
[/js]

Donde me imagino que no habrá problema en cambiar function() { alert(“submitted!”); } por la función que quieras usar.

Que yo recuerde si hay algún campo erróneo no se envía el formulario, pero no estoy seguro, como verás por el mensaje amarillo que aparece en la parte superior de la web, este artículo fue escrito hace más de 2 años.

YeisonSoto ‐ 7/8/2011 19:45

cual es la regla para que en el campo solo se puedan introducir letras?

La verdad es que no lo sé. Hay una regla para pedir sólo números, pero he revisado la documentación y no he encontrado ninguna regla para requerir sólo letras.

davidblanco ‐ 1/12/2011 0:28

Hola, mi preguna es como en un formulario con varios Select como se validan estos select, las primeras opciones de los select estan echos de esta forma Selecionar

frank ‐ 23/12/2011 4:42

Buen articulo, estoy probandolo y me gustria saber como darle formato a los mensaje que sale al validar, ya que veo el codigo fuente y no se genera alguna etiqueta span o similar.

pepe ‐ 27/12/2011 20:32

oye como validar un formulario que sea tipo date y al mismo tiempo aplicarle un calendariojquery al mismo tiempo lo puedo hacer por separado cada uno pero no al mismo tiempo los dos