jQuery: validazione dei form

La validazione dei form con jQuery è un processo che richiede due fasi. Nella prima fase, occorre creare un oggetto (singleton) che conterrà tutti i dati e i parametri necessari per validare i campi dei form, compresi i messaggi di successo o di errore, i pattern delle espressioni regolari usate e un metodo pubblico di validazione che verrà in seguito associato al form. La seconda fase, invece, prevede l'associazione delle routine di validazione con il form da validare. Dato che la validazione istantanea pone dei problemi di accessibilità, useremo un tipo di validazione che andrà ad operare sull'invio del form utilizzando l'evento submit. Anche questo tipo di validazione, tuttavia, non è scevra da problemi di accessibilità anche se ne pone di meno di quella istantanea.

Il form che andremo a validare ha tre campi che sono richiesti:

1. Nome (ID nome)
2. E-mail (ID (email)
3. Cellulare (ID mobile)

Nello specifico, questi campi devono soddisfare le seguenti caratteristiche:

1. Il nome dovrà essere composto da soli caratteri alfabetici
2. L'email dovrà essere in un formato valido
3. Il numero di cellulare dovrà necessariamente contenere solo caratteri numerici ed iniziare col numero 3.

Useremo in tal senso le espressioni regolari fornite da JavaScript (potete reperire più informazioni sulle espressioni regolari di JavaScript in questa pagina).

Per prima cosa dobbiamo definire il nostro oggetto che fungerà da validatore. Si tratta di un semplice oggetto letterale JavaScript:

var Validator = {

  //...

};

Un oggetto letterale JavaScript funziona a tutti gli effetti come un singleton, ossia non è possibile ottenerne un'istanza tramite l'operatore new. A sua volta, questo oggetto conterrà altri quattro oggetti letterali e un metodo per la validazione. I quattro oggetti letterali sono:

1. name

   Questo oggetto validerà il campo Nome. Esso contiene:

   • pattern: l'espressione regolare da usare per validare questo campo
   • message: il messaggio di errore restituito
   • check: un metodo che testa il valore del campo del form rispetto all'espressione regolare.
2. email

   Questo oggetto validerà il campo E-mail. Contiene gli stessi membri dell'oggetto precedente.

3. mobile

   Questo oggetto validerà il campo Cellulare. Contiene gli stessi membri dell'oggetto precedente.

4. messages

   Questo oggetto contiene le proprietà error e success che non sono altro che due stringhe rappresentanti due elementi HTML.

Vediamo l'implementazione di questi quattro oggetti:

var Validator = {

  name: {
  
    pattern: /^[a-z]+$/i,
    message: 'Nome non valido',
    check: function(value) {
    
      if(!this.pattern.test(value)) {
      
        return false;
      
      }
      
      return true;
    
    }
  
  },
  
  email: {
    pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
    message: 'Email non valida',
    check:  function(value) {
    
      if(!this.pattern.test(value)) {
      
        return false;
      
      }
      
      return true;
    
    }
  },
  
  
  mobile: {
  
    pattern: /^3\d+$/,
    message: 'Cellulare non valido',
    check: function(value) {
    
      if(!this.pattern.test(value)) {
      
        return false;
      
      }
    
      return true;
    
    }

  },
  
  messages: {
  
    error: '<div class="error"/>',
    success: '<div class="success">Invio effettuato con successo</div>'
  
  },

  // continua
};

I primi tre oggetti utilizzano il metodo test() dell'oggetto RegExp per verificare che il valore passato come argomento sia conforme al pattern specificato e restituiscono true o false tramite il loro metodo check(). Il quarto oggetto verrà invece utilizzato per inserire i vari elementi nel DOM al fine di visualizzare i messaggi di validazione (tramite il metodo/contenitore $() di jQuery).

A questo punto non ci resta che implementare il metodo di validazione dell'oggetto Validator. Esso accetterà come parametro un riferimento all'oggetto da validare (ossia il form), e quindi potremo usare anche this all'occorrenza. Questo metodo inizializza una variabile su true ed esegue dei test in sequenza. Se un test fallisce, il valore della variabile viene impostato su false. Dopo la sequenza di test viene eseguito un check booleano su tale variabile: se essa è ancora true, viene visualizzato un messaggio che conferma che non ci sono errori. Viceversa, sotto ciascun campo vengono visualizzati gli errori corrispondenti:

// continua
validate: function(form) {
  
    var name = $(form).find('#nome');
    var email = $(form).find('#email');
    var mobile = $(form).find('#mobile');
    
    var valid = true;
    
    if(!Validator.name.check(name.val())) {
    
      $(Validator.messages.error).
      text(Validator.name.message).
      appendTo(name.parent());
      
      valid = false;
    
    
    }
    
    if(!Validator.email.check(email.val())) {
    
      $(Validator.messages.error).
      text(Validator.email.message).
      appendTo(email.parent());
      
      valid = false;
    
    }
    
    if(!Validator.mobile.check(mobile.val())) {
    
      $(Validator.messages.error).
      text(Validator.mobile.message).
      appendTo(mobile.parent());
      
      valid = false;
    
    
    }
    
    if(valid) {
    
      $(Validator.messages.success).appendTo(form);
    
    } else {
    
      return valid;
    
    }
  
  
}

Questa implementazione ha uno scopo dimostrativo. Per renderla effettiva in un ambiente di produzione occorre permettere al metodo validate() di accettare come parametro anche l'evento submit. In questo modo si può riscrivere l'ultimo check semplicemente come:

if(!valid) {
  event.preventDefault();
}

Usare l'oggetto Validator è semplice:

$(function() {

  $('#form').submit(function(event) {
  
    Validator.validate(this);
    event.preventDefault();
  
  
  });

});

Potete visionare l'esempio finale in questa pagina.