Pourquoi toute la validation est-elle effectuée en même temps

Question

Ceci est le script jquery. La validation fonctionne, mais si vous laissez un champ vide et que vous cliquez ensuite sur le champ dans le formulaire, tous les messages de validation s'affichent pour chaque champ du formulaire, et pas seulement pour le champ vide. Et comment validez-vous une adresse e-mail dans jquery dans le format qui est dans mon exemple? Quelqu'un a des idées? Merci pour toute aide à l'avance

$(document).ready(function() { 
$('#firstname').on('blur', function() { 
    if ($('#firstname').val() == '') { 
     $('.errorMsg').show(); 
    } else { 
     $('.errorMsg').hide(); 
    } 
    }); 
    $('#lastname').on('blur', function() { 
    if ($('#lastname').val() == '') { 
     $('.errorMsg').show(); 
    } else { 
     $('.errorMsg').hide(); 
    } 
    }); 
    $('#email').on('blur', function() { 
    if ($('#email').val() == '') { 
     $('.errorMsg').show(); 
    } else { 
     $('.errorMsg').hide(); 
    } 
    }); 
    $('#roomtype').on('blur', function() { 
    if ($('#roomtype').val() == '') { 
     $('.errorMsg').show(); 
    } else { 
     $('.errorMsg').hide(); 
    } 
    }); 
}); 

Answer 1

parce que vous utilisez $('.errorMsg').show(); qui ciblera toutes les classes avec le nom = errorMsg.

assurez-vous que chaque validation ne cible le message d'erreur unique,

Utilisez $(this).next(".errorMsg").show(); et $(this).next(".errorMsg").hide(); pour chaque entrée

exemple:

if ($('#email').val() == '') { 
     $(this).next(".errorMsg").show(); 
    } else { 
     $(this).next(".errorMsg").hide(); 
    } 

Exemple de validation email:

$('.errorMsg').hide(); 
 

 
$('#email').on('blur', function(event) { 
 
    if (event.target.checkValidity()){ 
 
    $(this).next('.errorMsg').hide(); 
 
    } else { 
 
    $(this).next('.errorMsg').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="myform"> 
 
    <input id="email" type="email" placeholder="your email"> 
 
    <span class="errorMsg">Not Valid!!!!!!!!!!!</span> 
 
</form>