Validar un formulario con jQuery antes de enviarlo

Publicada el por

Veremos cómo validar un formulario con jQuery Validate antes de enviarlo. Una manera de prevenir posibles errores y hacer más eficaz el envío de formularios.

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.

Videotutorial jQuery validación formularios

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

Requisitos necesarios

El código

1. Referenciamos librerías necesarias

Lógicamente, debéis actualizar las versiones de jquery que tengáis y el nombre de la librería Validate si ésta cambiara.

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

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

$().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é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

<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éfono</label> 
    <input type="text" id="telefono" name="telefono" maxlength="50">
  </li>
  <li>
    <label>Mensaje *</label> 
    <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

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

En CodePen, si buscáis jquery validate, encontraréis multitud de ejemplos. Os dejo otro, que pone las condiciones de la validación en el mismo formulario.

Espero que el artículo Validar un formulario con jQuery antes de enviarlo, haya sido de vuestro interés y que os sea de utilidad.

Más información