La mayoría de webs (por no decir todas) hacen uso de formularios de contacto, suscripciones, cotizaciones, etc. Existen muchas formas de validar un formulario desarrollado en HTML, pero hoy hablaremos sobre Jquery Validation.

Este plugin hace que la validación de formularios sea mucho más fácil, además de ofrecer una personalización. El plugin trae por defecto distintos tipos de métodos para validar cada campo, ello podemos verlo en su documentación oficial. También nos proporciona una API para escribir sus propios métodos de validación.

Jquery Validation: Primeros pasos

Para comenzar a usar éste plugin, basta con descargarnos desde su página oficial el plugin y añadirlo en la cabecera o pié de página de nuestro sitio luego de haber agregado el jQuery 1.6.4+:

<script src="js/jquery.validate.js"></script>

Luego de agregarlo, procedemos a crear el formulario. Como ejemplo, vamos a crear un simple formulario de contacto.

<form id="contacto_formulario" method="post" action="">
<fieldset>
<legend>Formulario de contacto</legend>
<p>
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type="text">
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="telefono">Teléfono</label>
<input id="telefono" name="telefono" type="text">
</p>
<p>
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Enviar">
</p>
</fieldset>
</form>

Luego de haber agregado el código, podemos agregar el siguiente código javascript debajo del plugin.

jQuery(document).ready(function($) {
jQuery("#contacto_formulario").validate({
rules: {
                nombre : {
                required : true
                },
                email : {
                    required : true,
                    email : true
                },
                telefono : {
                    required : true,
                    number: true
                },
                mensaje : {
                    required : true
                },
},
messages: {
                nombre: {
                    required: "Ingresa un nombre"
                },
                email: {
                    required: "Ingresa un email",
                    email: "Ingresa un email válido",
                },
                telefono: {
                    required: "Ingresa un número de teléfono",
                    number: "Sólo debes ingresar números"
                },
                mensaje: {
                    required: "Ingresa un mensaje"
                },
}
});
});

Ahora podemos probar el funcionamiento del formulario. Podemos ver más demos para ver otras funcionalidades que se le podría dar a éste plugin.

Más adelante, veremos como agregar más métodos de validaciones con jquery validate.