Resultados

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:

<script src="jquery.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script>

A continuación añadimos:

<script type="text/javascript"><!--
$().ready(function() {
$("#formulario").validate();
});
// --></script>

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í:

<form id="formulario" method="post"> Nombre:
<label></label>

<input id="nombre" name="nombre" type="text" />Contraseña:
<label></label>

<input id="pass_1" name="pass_1" type="password" />Repite contraseña:
<label></label>

<input id="pass_2" name="pass_2" type="password" />Email:
<label></label>

<input id="email" name="email" type="text" /><label></label>

<input id="button" name="button" type="submit" value="Enviar" /> </form>

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 (nombre@dominio.nnn), mostrará un aviso.

Podríamos dejar así el formulario anterior:

<form id="formulario" method="post"> Nombre:
<label></label>

<input id="nombre" class="required" name="nombre" type="text" />Contraseña:
<label></label>

<input id="pass_1" class="required" name="pass_1" type="password" />Repite contraseña:
<label></label>

<input id="pass_2" class="required" name="pass_2" type="password" />Email:
<label></label>

<input id="email" class="required email" name="email" type="text" /><label></label>

<input id="button" name="button" type="submit" value="Enviar" /> </form>

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:

<script type="text/javascript"><!--
$().ready(function() {
$("#formulario").validate();
});
// --></script>

Ahora en lugar de esto debemos añadir:

<script type="text/javascript"><!--
$().ready(function() {
$("#formulario").validate({
rules: {
pass_2: {
required: true,
equalTo: "#pass_1"
}
}
});
});
// --></script>

¿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.