l'ajout d'une classe après e-mail est validée à l'aide jquery

Question

Je suis en train d'utiliser jQuery pour la validation du courrier électronique dans un champ de formulaire

$(document).ready(function() { 
    var email = new RegExp("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"); 
    var value = $("#email_address").val(); 

    $("#email_address").on("keypress", function() { 
     if(email.test(value)) { 
      $("#email_address").parent().addClass("has-success"); 
     } 
    }); 
}); 

Cependant, la classe has-success ne soit pas ajouté. J'ai essayé chaque ligne de code individuellement dans la console et ils semblent tous faire/pointer vers la bonne chose. C'est quand tout est mis en place que cela ne semble pas fonctionner.

Answer 1

Vous chargez la valeur sur le DOM de jQuery et vous ne le chargez plus jamais.

Vous devez tester la valeur actuelle , pas celui qui est là quand le DOM est prêt, à peu près:

$("#email_address").on("keypress", function() { 
    if(email.test($(this).val())) { 
     $("#email_address").parent().addClass("has-success"); 
    } 
}); 

non apparentés, mais Personnellement, j'enveloppent le test de courrier électronique dans une fonction si au lieu de dire email.test(xxx) vous pourriez le lire plus naturellement comme validEmail(xxx) etc.