jQuery Validation – Escoger dónde mostrar los errores

Esta librería permite validar un formulario antes de enviarlo. En el caso que no se cumplan las condiciones que se indican, muestra los errores que tiene el formulario. Pues bién, veamos cómo escoger dónde mostrar los errores con jQuery Validation

Ya vimos en un artículo anterior, cómo validar un formulario con jquery antes de enviarlo. También vimos cómo crear nuevas reglas para validar campos del formulario. En este artículo, veremos que podemos elegir dónde mostrar los avisos que nos de el validador.

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>
  <div id="formconsole" class="error"></div>
</form>

Como podéis ver el formulario tiene sus campos, en en la última fila, una etiqueta div donde podemos mostrar o no los errores.

Mostrar errores en cada campo

Si el código de validación no se le indica nada, por defecto, los errores se mostraran debajo de cada campo.

$().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},
		},
		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",
		}
	});
});

En este caso, el div que hemos creado no serviría de nada. Cada error se mostraría debajo de cada campo del formulario, y ya está.

Mostrar errores en un determinado sitio

En cambio, en ocaciones, nos interesará mostrar los errores en un determinado sitio. En nuestro ejemplo, hemos creado el bloque div con id formconsole, donde mostraremos los errores.

$().ready(function() {
  $("#formcontacto").validate({
    errorContainer: "#formconsole",
    errorLabelContainer: "#formconsole",
    wrapper: "span",
    rules: {
	nombre: { required: true, minlength: 2},
	email: { required:true, email: true},
	telefono: { minlength: 2, maxlength: 15},
	mensaje: { required:true, minlength: 2},
    },
    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",
    }
  });
});

Si os fijáis, hemos añadido tres líneas en las que indicamos dónde debe mostrar los errores (formconsole) y de qué modeo debe crearlos (span). Si tiene tres errores, cada uno de ellos se listará en ese bloque y no debajo de cada campo. De esta manera tenemos controlado dónde se mostrarán los errores.

Espero que este artículo os facilite y os haya ayudado un poco más en cómo escoger dónde mostrar los errores con jQuery Validation

---

Más información

• Tutoriales de jQuery
• Web oficial de jQuery Validation