La validazione inline di un form è quella validazione che si effettua campo per campo ogni qualvolta il campo corrente perde il focus (evento blur). Il problema della validazione inline è che da sola non è molto efficace. Infatti l'utente potrebbe decidere lo stesso di inviare il form (si presuppone comunque la presenza obbligatoria di una validazione lato server). Quindi la validazione inline va corroborata con una routine che disabilita o riabilita l'invio di un form a seconda del risultato della validazione. Vediamo come implementarla.
La validazione che effettueremo verifica solo se un campo ha un valore, a titolo di esempio. Definiremo un oggetto che:
- usa un flag per stabilire se il campo ha passato la validazione
- associa tramite
bind()una funzione anonima ad un namespace custom dell'eventosubmitper disabilitare l'invio del form - riabilita l'invio del form se la validazione ha dato esito positivo
Ecco l'oggetto:
var FormHandler = {
valid: true,
validate: function() {
$(':input', '#contact').each(function() {
var $input = $(this);
$input.blur(function() {
var value = $input.val();
if(value == '') {
FormHandler.valid = false;
FormHandler.stop();
} else {
FormHandler.valid = true;
FormHandler.go();
}
});
});
},
stop: function() {
if(!this.valid) {
$('#contact').bind('submit.validate', function(event) {
event.preventDefault();
});
$(':submit', '#contact').addClass('disabled');
}
},
go: function() {
if(this.valid) {
$('#contact').unbind('submit.validate');
$(':submit', '#contact').removeClass('disabled');
}
}
};
Usare l'attributo disabled è utile, ma non indispensabile. Inoltre impostare tale attributo non dà dei riferimenti visivi all'utente se il bottone di invio ha un layout diverso da quello predefinito del browser. Per questo motivo viene aggiunta o rimossa una classe CSS a seconda dei casi.
Potete visionare l'esempio finale in questa pagina.