Validar un formulario con jQuery antes de enviarlo

Una de las funciones que le dan un perfil mas profesional a nuestra web, es la validación de los formularios, antes de enviarlos. Una opción es enviar el formulario, validarlo en el lado del servidor y mostrar el mensaje de error. Otra es validarlo antes de enviarlo.

Vídeo Tutorial

El plugin Validation de jquery nos permite validar de immediato el formulario, ahorrando pasos y malas experiencias.

Requisitos

El código

1. Referenciamos librerías necesarias

1
2
<script type="text/javascript" src="./include/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./include/jquery.validate.js"></script>

Llamamos las dos librerías necesarias. La librería jquery, debéis poner la versión que os descarguéis.

2. Se crea la función que hará la validación

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$().ready(function() {
	$("#formcontacto").validate({
		rules: {
			nombre: { required: true, minlength: 2},
			email: { required:true, email: true},
			telefono: { minlength: 2, maxlength: 15},
			mensaje: { required:true, minlength: 2},
			validator: { required:true, maxlength: 4, minlength: 4}
		},
		messages: {
			nombre: "El campo es obligatorio.",
			email : "El campo es obligatorio y debe tener formato de email correcto.",
			telefono : "El campo Tel&eacute;fono no contiene un formato correcto.",
			mensaje : "El campo Mensaje es obligatorio",
			validator : "Inerte los cuatro caracteres de la imagen superior.",
		}
	});
});

Aunque podéis ver todas las opciones en la web oficial del plugin, os resumo que ‘$(“#formcontacto”).validate(‘ hacemos que el formulario con ID formcontacto, antes de enviarse se validará con las opciones del apartado ‘rules’ y en caso de haber error, se mostrarán los mensajes del apartado ‘messages’.

Dentro de ‘rules’ y ‘messages’ nos referimos a cada campo por su atributo Name (nombre, email, telefono y mensaje )

Editado: las función se refiere a los Names de los campos. No a los ID com anteriormente decía.

3. El formulario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form id="formcontacto" action="./contactar_send.php" method="post">
	    <ul>
	    <li><label>Nombre *</label>
	    <input type="text" id="nombre" name="nombre" maxlength="125" /></li>
	    <li><label>Email *</label>
	    <input type="text" id="email" name="email" maxlength="225" /></li>
	    <li><label>Tel&eacute;fono</label>
	    <input type="text" id="telefono" name="telefono" maxlength="50" /></li>
	    <li><label>Mensaje *</label><br />
	    <textarea id="mensaje" name="mensaje" rows="5" cols="36"></textarea></li>
	    <li>
	    	<input type="submit" value="Enviar" />
	    </li>
	    </ul>
</form>

 
Importante poner el ID del formulario (formcontacto) y de los diferents atributos Name de los campos (en el ejemplo: nombre, email, telefono y mensaje)

4. La hoja de estilos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
form label {
	width: 100%;
	float: left;
	display: inline-block;
	font-weight: bold;
	margin-bottom: 5px;
}
form label.error {
	float: left;
	color: red;
	font-weight: normal;
	padding-left: .5em;
	vertical-align: top;
}

Los label serían las etiquetas de los diferentes campos, y el label.error sería el formato de los mensajes de error.

5. El ejemplo online

Podéis ver un ejemplo en la siguiente dirección:

Más información

[wp_ad_camp_2]

Artículos relacionados

jQuery – Traducir hora española a inglesa Es muy común tener en un textbox de un formulario una fecha en español DD/MM/YYY, y queramos convertirla al formato inglés YYYY/MM/DD para poder traba...
Cómo crear una página “en construcción”... Damos de alta el hosting, los emails, ... y ahora toca algo que parece muy sencillo, crear una página temporal que mostraremos mientras no colgamos la...
Plugins jQuery imprescindibles para crear una apli... Os presentamos algunos plugins imprescindibles para el desarrollo de aplicaciones web. Suponiendo que trabajáis con jQuery y jQuery UI (librería de...
Apuntes librería JavaScript 3D Three.js Este fin de semana, y aprovechando las fiestas Navideñas, me he puesto a curiosear la librería Three.js Como normalmente tengo la cabeza casi llena de...

7 comentarios

  • Carlos

    Buenas, es posible usar este plugin en conjunto con el “ajaxform” y como seria la implementación? Gracias de antemano!

  • Hola Carlos, yo no lo he probado, pero como se indica en el siguiente enlace, parece que si es posible, siempre respetando el orden de llamada. Primero validate() y luego ajaxForm().
    http://www.ozonesolutions.com/programming/2011/09/ajaxform-and-validation-plugins-for-jquery/

  • Saludos, muy útil el articulo para esta implementación, dos cosas:

    1) Seria muy bueno saber como montaste el ejemplo del Captcha ya que en el ejemplo no está.

    2) En el formulario que tienes en http://www.papaxoc.com/contactar/ puedo ver dos cosas:
    1- Cuando envio los datos completos me genera error y me envia a http://www.papaxoc.com/contactar/send sin decirme cual es el error, entonces lo más seguro fue que el captcha que lo hice mal.
    2- Cuando estoy en IE8 al pararme sobre el boton enviar veo la URL en el caso que apunte a un .php esto le puede decir al usuario la ruta donde esta montando ese php que envia un correo, encontre la siguiente solución:

    var statusmsg=’,’
    function hidestatus(){
    window.status=statusmsg,
    return true,
    }

    y en el input ingresar la siguiente instrucción onMouseover=”return hidestatus()”

    Mil gracias.

  • Hector Ramirez

    Este plugin no valida los campos por el id sino por el nombre por eso mucha genete lo ha dejado de utilizar ya que no es funcional validar campos por nombre ya que se necesitan esos elementos en el lado del servidor y muchas veces para usar frameworks de trabajo.

  • Luis Vargas

    Hola tengo una pregunta esta código para validar esta bien pero lo quiero combinar con código que me permite enviar registros a bd sin que se recargue, pero en mi formulario no tengo un botón tipo submit si no tipo botón y en este ejemplo de validación se requiere de submit, es posible con el button o es necesario submit

    • Prueba capturando el evento click del botón:

      $("#btn").click(function() {
      $("#form").validate();
      });
      

      También he leído que puedes utilizar la función valid()

      $("#myform").validate();
      $("#btn").click(function() {
          alert("Validacion: " + $("#myform").valid());
          return false;
      });
      

      Personalmente no lo he probado…

  • Andres

    Brother crees que puedas hacer el video haciendo la progra para ver como pones las librerias o como implementas las librerias en web en netbeans gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*