Valida formularios con jQuery

Beware: This post was published 7 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.