JavaScript: validazione dei form senza jQuery

Short link

jQuery è utile, ma crea dipendenza. In questo articolo vedremo come liberarci dalla dipendenza da jQuery per validare un form usando un semplice oggetto JavaScript. L'implementazione è davvero lineare e vedrete come alla fine, nonostante avremo qualche riga di codice in più, avremo ottenuto quello che volevamo. Vediamo i dettagli dell'implementazione.

Vogliamo semplicemente validare i campi Nome e E-mail di un form. Per questo motivo assegniamo agli elementi input una classe CSS chiamata required. Ora creiamo il nostro oggetto:


var Validator = function(form) {

  this.form = document.getElementById(form) ||
              document.forms[0];
              
  // continua


};

Questo oggetto ha la proprietà form che è un riferimento DOM al form da validare. Creiamo quindi al suo interno un altro oggetto che eseguirà i test di validità con le espressioni regolari e memorizzerà un messaggio per ogni errore:


var validation = {
    
      name: {
      
        pattern: /^[a-z]+$/i,
        message: 'Nome non valido',
        check: function(value) {
        
          if(this.pattern.test(value)) {
          
            return true;
          
          }
          
          return false;
        
        }
      
      },
      
      email: {
      
        pattern: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
        message: 'Email non valida',
        check: function(value) {
        
          if(this.pattern.test(value)) {
          
            return true;
          
          }
          
          return false;
        
        }
      
      
      }
    
    
};

Quindi tra tutti i campi dobbiamo selezionare solo quelli con la classe CSS required. Creiamo un metodo privato per tale scopo che restituirà un array di elementi DOM aventi la classe specificata:


var getRequiredFields = function() {
    
      var required = [];
      var inputs = this.form.getElementsByTagName('input');
      var i, len = inputs.length;
      
      for(i = 0; i < len; i += 1) {
      
        var input = inputs[i];
        
        if(input.hasAttribute('class')) {
        
        
          var clName = input.getAttribute('class');
          
          if(clName == 'required') {
          
            required.push(input);
          
          }
        
        
        }
      
      
      }
      
      return required;
      
};

Prima di validare i campi è necessario creare un altro metodo helper, privato anch'esso, per visualizzare i messaggi di errore su ogni campo:


 var createErrorMessage = function(text, element) {
    
      text = text || 'Errore';
      element = element || null;
    
      var message = document.createElement('div');
      message.className = 'error';
      message.innerHTML = text;
      
      element.parentNode.appendChild(message);
      
    
    
    
};

Infine, il metodo pubblico validate() che restituirà un valore booleano che indica se sono presenti errori o meno:


this.validate = function() {
    
    
      var inputs = getRequiredFields();
      var valid = true;
      var i, len = inputs.length;
      
      for(i = 0; i < len; i += 1) {
      
        var input = inputs[i];
        var value = input.value;
        var type = input.getAttribute('name');
        
        if(type == 'nome') {
        
          if(!validation.name.check(value)) {
          
            createErrorMessage(validation.name.message, input);
            
            valid = false;
          
          
          }
        
        
        }
        
        if(type == 'email') {
        
          if(!validation.email.check(value)) {
          
            createErrorMessage(validation.email.message, input);
            
            valid = false;
          
          }
        
        }
      
        

      
      }
      
      return valid;
    
};

Restituendo un valore booleano, tale metodo può essere utilizzato per consentire o impedire l'invio del form. Vediamo come:


var form = document.getElementById('form');
var validator = new Validator('form');
form.onsubmit = function() {

  var isValid = validator.validate();
  
  return isValid;

};

Usando tale valore di ritorno riusciamo anche a gestire l'evento submit e l'invio del form.

Potete visionare l'esempio finale in questa pagina.