jQuery Validation – Validar según una regla personalizada

Publicada el por

Con jQuery Validation veremos cómo validar un formulario según una regla personalizada.

Ya vimos en un artículo anterior, cómo validar un formulario con jQuery validation antes de enviarlo. No está mal para un artículo del 2012 que todavía sigue vigente. En él , vimos que con el plugin jQuery Validation podíamos validar los campos de un formulario de forma sencilla:

Llamamos la librería

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

Luego tenemos 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>

Y por último, el código que valida el formulario antes de enviarlo.

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

Hasta aquí bien. Vemos que en apartado rules, nos permite utilzar las opciones de required, maxlength. minlength, email… y otras muchas funciones para comprobar que los campos cumplen algunas condiciones. Tenéis todas las funciones de validación listadas en la documentación de jQuery Valitacion.

Pero, y siempre hay un pero, puede suceder que vosotros necesitéis la validación de un campo de forma personalizada. Y esta librería lo permite. Pongamos un ejemplo:

Vamos a crear una función para utilizarla posteriormente en la validación. En este caso vamos a validar, que el campo con el que se trabaje, sólo tenga caracteres alfanuméricos (azAZ09).

$().ready(function () {
  [...]

  $.validator.addMethod("formAlphanumeric", function (value, element) {
    var pattern = /^[\w]+$/i;
    return this.optional(element) || pattern.test(value);
  }, "El campo debe tener un valor alfanumérico (azAZ09)");

  [...]
});

O también podríamos añadir otra función que revisara que el campo es un email, pero de una manera más personalizada y que cumpla reglas que nosotros indiquemos:

$().ready(function () {
  [...]

  $.validator.addMethod("formAlphanumeric", function (value, element) {
    var pattern = /^[\w]+$/i;
    return this.optional(element) || pattern.test(value);
  }, "El campo debe tener un valor alfanumérico (azAZ09)");

  $.validator.addMethod("formEmail", function (value, element) {
     var pattern = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
     return this.optional(element) || pattern.test(value);
  }, "Formato del email incorrecto");

  [...]
});

Pues ya tenemos dos nuevas funciones para poder utilizar en la validación del formulario, formAlphabetic y formEmail. La primera hará que verifique si el campo es un alfanumérico y la segunda función mirará que sea un email. Ahora toca utilizarlas:

$().ready(function() {
  $.validator.addMethod("formAlphanumeric", function (value, element) {
    var pattern = /^[\w]+$/i;
    return this.optional(element) || pattern.test(value);
  }, "El campo debe tener un valor alfanumérico (azAZ09)");

  $.validator.addMethod("formEmail", function (value, element) {
     var pattern = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
     return this.optional(element) || pattern.test(value);
  }, "Formato del email incorrecto");

  $("#formcontacto").validate({
    rules: {
      nombre: { required: true, minlength: 2, formAlphanumeric: true},
      email: { required:true, formEmail: 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.",
    }
  });
});

Fijaos como en los campos nombre e email utilizamos las dos funciones, esperando a que nos devuelvan true. En el caso de que devuelvan false, el formulario no se envía.

Con este formato de poder ir creando nuestras funciones, podemos validar un formulario antes de enviarse de forma muy esquematizada y personal.

La clave es formar el patrón o regla. En nuestras funciones equivaldría a montar la variable pattern. Si buscáis en Internet hay multitud de patrones a utilizar que verifican si el campo cumple con el formato de DNI, NIF, Email, numeŕico…. Si domináis la creación de patrones, podréis crear las validaciones que más se ajusten a vuestras necesidades.

Espero que el artículo os ayede a ver cómo con jQuery Validation se puede validar un formulario según una regla personalizada.

Más información