La validazione as you type è molto richiesta, specie nel backend dei siti o nei framework più famosi. Sostanzialmente si tratta di intercettare la pressione dei tasti ed eseguire un test con le espressioni regolari. In questo articolo vedremo come implementare questo tipo di validazione sugli indirizzi e-mail con jQuery.
Definiamo subito l'espressione regolare da usare all'interno di una funzione:
var validateEmail = function(elementValue) {
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(elementValue);
};
Quindi usiamo l'evento keyup sul campo apposito:
$('#email').keyup(function() {
var value = $(this).val();
var valid = validateEmail(value);
if (!valid) {
$(this).css('color', 'red');
} else {
$(this).css('color', '#000');
}
});
Potete visionare l'esempio finale in questa pagina.