jQuery: indicatore di avanzamento della validazione di un form

Aggiungere un indicatore di avanzamento della validazione ad un form è sicuramente un effetto molto interessante da realizzare con jQuery. Possiamo sfruttare gli eventi focus e blur per modificare le dimensioni di un elemento vuoto che fungerà da barra di avanzamento. Vediamo insieme i dettagli.

Aggiungiamo la nostra barra di avanzamento all'inizio del form:

<form action="#" method="get" id="form">

    <div id="progress"><span></span></div>
    
</form>

Assegniamo quindi degli stili predefiniti alla nostra barra:

#progress {
	width: 300px;
	height: 20px;
	margin: 0 0 1em 0;

}

#progress span {
	width: 0px;
	background: #398235;
	height: 100%;
}

Definiamo anche dei messaggi di errore fittizi per simulare la validazione:

div.error {
	clear: both;
	height: 100%;
	margin-left: 6.5em;
	padding: 4px 0 6px 30px;
	background: url(warning.png) no-repeat 0 0;
}

Con jQuery dobbiamo innanzitutto inserire i messaggi di validazione dopo ciascun campo del form e nasconderli:

var messages = {
  
    element: '<div class="error" />',
    message: 'Valore non valido'
  
  
};
  
  
$('li', '#form').each(function() {
  
    var $li = $(this);
    $(messages.element).text(messages.message).
    appendTo($li).hide();
    
  
  
});

Quindi operiamo in questo modo:

1. Su focus nascondiamo gli eventuali messaggi di errore già visibili
2. Su blur operiamo una scelta:
   • Se il valore del campo è valido, aumentiamo in modo incrementale la larghezza della nostra barra di avanzamento
   • Se il valore del campo non è valido, mostriamo il messaggio di errore

$('li', '#form').each(function(index) {
  
    var $input = $(this).find('input');
    
    $input.focus(function() {
    
    	$input.next().fadeOut(1000);
    
    });
    
    $input.blur(function() {
             
      var value = $input.val();
      
      if(value == '' || value == null) {
      
        $input.next().fadeIn(1000);
      
      
      } else {
      
         
        $('span', '#progress').animate({width: '+=100px'}, 'slow');
      
      
      }
  
    });
  
  });

Potete visionare l'esempio finale in questa pagina.