一度にすべての検証が行われる理由

Question

これはjqueryスクリプトです。ただし、1つのフィールドを空白のままにしてフォーム上のフィールドをクリックすると、確認メッセージがすべて空白のフィールドだけでなく、フォームの各フィールドに表示されます。そして、私の例にある形式でjqueryの電子メールアドレスをどのように検証するのですか？誰にでもアイデアはありますか？事前に任意の助けてくれてありがとう

$(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

名前= errorMsgですべてのクラスを対象とします$('.errorMsg').show();を使用しているため。電子メールの検証のため

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

例：

$('.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>

は、各検証が唯一の各入力

例えば使用$(this).next(".errorMsg").show();と$(this).next(".errorMsg").hide();ユニークなエラーメッセージ

を対象としてください