Ein Einfacher Formvalidator

formaValidator.js

/*
 * Wegen der häufigen verwendung dieses Selctors Speichern wir
 * den zu erst in eine Variable.
 *
 */
var formular_input = $('#formular input');

/*
 * In der Variable formular_input befindet sich ein Obejct
 * welches alle Inputfelder enthält. Diese Inputfelder werden
 * nun in der folgenden Funktion mit each (ein for-schleife)
 * durchlaufen. Wird eines der Inputfelder focusiert wird
 * .focus auf diese inputfeld ausgeführt, selbiges geschiet
 * bei dem verlieren des Focus.
 *
 * First run (.each)
 * zu erst durchlaufen wir das Object was in der formular_input
 * selektiert wurde und prüfen ob es inputfelder mit einem leeren
 * Value gibt. Wird ein leeres Inputfeld gefunden, wird der Wert
 * aus dem Attribut rel als Value gesetzt.
 *
 * Second run (.focus)
 * Wird ein Inputfeld focusiert, wird die eine evl. vorhandene
 * classe entfernt und der value entfernt.
 *
 * Third run (.blur)
 * Verliert ein Inputfeld den focus, wird die funktion checkInput
 * auf gerufen und das aktuelle inputfeld übergeben.
 *
 */
formular_input.each(function(e){
  if($(this).val() == ''){
    $(this).val($(this).attr('rel'));
  }
}).focus(function(){
  $(this).val('').attr('class','');
}).blur(function(){
  checkInput($(this));
});

/*
 * Weird das Formular abgeschickt prüfen wir ob alle inputfelder
 * die zu erwartenden Werte enthalten. Weil das in einer each-schleife
 * passiert speichern wir fehlgeschlagene prüfungen in der Varible
 * formError und setzten am jeweiligen Inputfeld die classe error.
 *
 */
$('#formular form').submit(function(e){
  //e.preventDefault();
  formular_input.each(function(e){
    if($(this).attr('type') == 'text'){
      formError = checkInput($(this));
    }
  });
  
  if(formError){
    return false;
  }
  
});

/*
 * Um erstens Redundanzen zu vermeiden und eine wiederverwendbarkeit
 * zu erhöhen wurde diese Funktion eingeführt. Mit dieser Funktion
 * wird geprüft ob in dem übergebenen Inputfeld der Value nicht
 * Leer und nicht gleich dem rel ist.
 *
 * @var input object
 * @return true or void
 *
 */
function checkInput(input){
  if($(input).attr('rel') == $(input).val() || $(input).val() == ''){
    $(input).attr('class','error');

    if($(input).val() == ''){
      $(input).val($(input).attr('rel'));
    }

    return true;
  }
}