Javascript - Retirer l'attention de l'entrée

Question

J'ai une entrée qui affiche un message pour un format d'email invalide. Ce message disparaît lorsque le format est respecté.

$('#id_email.form-control').keyup(function(){ 
$('span.error-keyup-email').remove(); 
var inputVal = $(this).val(); 
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
if(!emailReg.test(inputVal)){ 
    $(this).after('<span style="color:red;" class="error error-keyup-email">Invalid Email Format.</span>'); 
} 
}); 

Le code fonctionne très bien. C'est exactement ce que je voulais.

Problème: Lorsque je sélectionne un e-mail que j'ai déjà enregistré par le navigateur (normalement, il enregistre un e-mail ou un pseudo pour l'utilisateur). Lorsque je ne tape pas mon email et que je sélectionne mon email, le message reste sous la saisie, même si le format est correct.

Avez-vous une idée?

Je peux vous donner plus de détails si vous voulez et vous remercier d'avoir pris le temps sur mon problème :)

Have a nice day :)

Answer 1

Essayez ceci:

$('#id_email.form-control').on('input', function(){ 
$('span.error-keyup-email').remove(); 
var inputVal = $(this).val(); 
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
if(!emailReg.test(inputVal)){ 
    $(this).after('<span style="color:red;" class="error error-keyup-email">Invalid Email Format.</span>'); 
} 
}); 

keyup ne se déclenche une fois que la touche est enfoncée. entrée feux immédiatement lorsque la valeur change

Answer 2

// supprimer la durée d'erreur dans les autres

$('#id_email.form-control').keyup(function(){ 
    $('span.error-keyup-email').remove(); 
    var inputVal = $(this).val(); 
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
    if(!emailReg.test(inputVal)){ 
     $(this).after('<span style="color:red;" class="error error-keyup-email">Invalid Email Format.</span>'); 
    } 
    else{ 
     $('span.error-keyup-email').remove(); 
    } 
    }); 

Answer 3

utilisation événement de changement d'entrée qui a appelé auto lorsque le focus est perdu

$('#id_email.form-control').change(function(){ 

}); 

Answer 4

Le problème est que lorsque vous utilisez autofill à partir du navigateur, vous devez détecter une certaine façon. Malheureusement, l'événement de changement d'entrée n'est pas déclenché dans ce cas.

Une solution possible pourrait être de parcourir tous les champs d'entrée onload et vérifier si elles sont remplies