Crea un sencillo plugin para validar tus formularios con jQuery

Vamos a crear un sencillo plugin para jQuery que valide una serie de campos obligatorios en los formularios y que no permita que éste se envíe hasta que no se hayan rellenado.

Su funcionamiento va a ser el siguiente:

• No va a permitir que se envie el formulario si existe algún campo requerido en blanco.
• Deberá mostrar los campos requeridos que no hayan sido rellenados.

El plugin se invocará de la siguiente manera:

$(document).ready(function(){
  $('form').validator();
});

Esto añadirá la funcionalidad del validador a todos los formularios de la página.

El plugin tendrá la siguiente estructura:

(function($){
  $.fn.validator = function(opts){

    return $(this).submit(function(evt){
      // Código
    });
  };
})(jQuery);

Lo que va a hacer es observar el evento onsubmit del formulario y entonces será cuando compruebe los campos requeridos. La forma en que vamos a marcar un campo como requerido es añadiendole la clase required.

Por ejemplo:

<form action="" method="post">
  <input type="text" class="required" />
  <textarea class="required"></textarea>
  <input type="submit" value="Enviar" />
</form>

En la función submit() del plugin incluiremos lo siguiente:

$(this).find('.required').each(function(){
  if ($(this).val() == ''){
    $(this).addClass('notFilled');
    evt.preventDefault();
  }
});

Lo que hace es comprobar todos los elementos con clase .required y si no ha sido rellenado (utilizando la función val()) le añadimos la clase notFilled y detenemos el evento con evt.preventDefault(). En caso de no encontrar ningun campo requerido sin completar se enviará el formulario.

Con la clase notFilled podemos destacar los campos del formulario pendientes de ser rellenados:

<style>
  .notFilled{
    border: 2px solid #f00;
    background: #f99;
  }
</style>

Como se puede ver el plugin es muy sencillo. Ahora vamos a introducir algunas mejoras, por ejemplo que en caso de existir algun elemento con la clase notFilled le daremos el foco al primero de ellos. Añadiremos lo siguiente justo despues del código anterior, dentro de la funcion submit():

$(this).find('.notFilled').first().focus();

Por último, vamos a detectar cuando estos campos sean rellenados para eliminar la clase notFilled. Añadiremos justo antes de la función submit() lo siguiente:

$(this).find('.notFilled').live('keyup', function(){
  if($(this).val() != ""){
    $(this).removeClass('notFilled');
  }
});

Lo que hace es detectar cuando se pulsa una tecla dentro de un campo con la case notFilled y si contiene algo la elimina.

El código final es el siguiente:

(function($){
  $.fn.validator = function(opts){
    $(this).find('.notFilled').live('keyup', function(){
      if($(this).val()!=""){
          $(this).removeClass('notFilled');
      }
    });
    return $(this).submit(function(evt){
      $(this).find('.required').each(function(){
        if ($(this).attr('value') == ''){
          $(this).addClass('notFilled');
          evt.preventDefault();
        }
      });
      $(this).find('.notFilled').first().focus();
    });
  };
})(jQuery);