jQuery Validation de Formularios

el

jQuery Validation


jQuery plugin: Validation es un plugin que facilita la validación de formularios.
Una vez instalado, .validate(options) permite indicar en options un conjunto de reglas y mensajes que se usarán para la validación.

/**
* Return true if the field value matches the given format RegExp
*
* @example jQuery.validator.methods.pattern("AR1004",element,/^AR\d{4}$/)
* @result true
*
* @example jQuery.validator.methods.pattern("BR1004",element,/^AR\d{4}$/)
* @result false
*
* @name jQuery.validator.methods.pattern
* @type Boolean
* @cat Plugins/Validate/Methods
*/
jQuery.validator.addMethod("pattern", function(value, element, param) {
  if (this.optional(element)) {
    return true;
  }
  if (typeof param === 'string') {
    param = new RegExp('^(?:' + param + ')$');
  }
  return param.test(value);
}, "Invalid format.");

$(document).ready(function() {
  $('form#contactanos').validate({
    rules: {
      nombres: {
        required: true,
        pattern: /^[a-zA-ZáéíïóúüÁÉÍÏÓÚÜñÑ\'\"\s]+$/,
        maxlength: 100
      },
      edad: {
        required: true,
        digits: true
      },
      birthday: {
        required: function() {
            return $('[name="edad"]').val() == '';
        }
      }
    },
    messages: {
      nombres: {
        required: 'No puede estar vacío',
        pattern: 'No es válido',
        maxlength: 'No puede exceder los 100 caracteres'
      },
      edad: {
        required: 'No puede estar vacío',
        digits: 'Debe ser un número'
      },
      birthday: {
        required: 'Debe indicar su edad'
      }
    }
  });
});

jQuery.validator.addMethod() permite agregar más opciones de validación, en este caso patrones de expresiones regulares. Más patrones se pueden hallar en el archivo additional-methods.js que acompaña al plugin.

required puede ser el resultado de un callback. En este caso, es una función que verifica si cierto campo ha sido llenado.

Cuando un error ocurre, por default al campo en cuestión se le agrega la clase 'error' y se le precede un label.error también, con el mensaje que se especificó. 
<form>
  <label for="nombres">Nombres</label>
  <input type="text" name="nombres" class="error">
  <label for="nombres" generated="true" class="error" style="">No puede estar vacío</label>

  <label for="edad">Edad</label>
  <input type="text" name="edad">

  <label for="birthday">Fecha de Nacimiento</label>
  <input type="text" name="birthday">
</form>