Se usate la validazione inline dei form con jQuery vi sarete accorti di un piccolo problema inerente all'uso dell'evento blur(): l'evento non si attiva sull'ultimo campo del form se l'utente non usa il tasto Tab ma invia direttamente il form. Quindi se l'utente non seleziona il pulsante di Invio da tastiera, l'ultimo campo non verrà validato. Questo non è un problema, in quanto è la validazione lato server che conta, ma può risultare fastidioso per l'utente qualora non se ne fosse accorto. Vediamo come ovviare al problema.
La soluzione jQuery è davvero semplice: occorre aggiungere un test di verifica finale quando l'utente invia il form. In questo caso useremo il metodo trigger() per innescare l'evento blur sui campi del form:
var Validator = {
inputs: $(':input', '#fields'),
check: function() {
this.inputs.each(function() {
var $input = $(this);
$input.blur(function() {
if(this.value == '') {
$('<span class="error"/>').text('Error').insertAfter($input);
}
});
});
},
submit: function() {
$('#form').submit(function(e) {
if($('.error', '#form').length) {
$('.error', '#form').remove();
}
Validator.inputs.trigger('blur');
if($('.error', '#form').length) {
e.preventDefault();
}
});
},
init: function() {
this.check();
this.submit();
}
};
Validator.init();
Ovviamente a titolo di esempio ho usato solo una validazione basilare. Potete visionare l'esempio finale in questa pagina.