jQueryの検証が連絡フォームで機能していません

Question

jQueryを通じて検証が必要です。私は2つのフィールド名と電子メールを持っています。電子メールの空白フィールドの検証が機能していません。私が間違っているのはここ

が

<form> 
    Name : <input type="text" name="name" id="name"><br> 
    <span id="nameSpan"></span> 
    <br> 
    Email:<input type="email" name="email" id="email1"><br> 
    <span id="emailSpan"></span> 
    <br> 
    <input type="submit" id="submitBtn"> 
</form> 

ではJavaScript

$(document).ready(function(){ 
    var name = $("#name").val(); 
    var email1 = $("#email1").val(); 

    $("#submitBtn").on("click", function(){ 
     if(name == '') 
     { 
      $("#nameSpan").html('Name is required'); 
      return false; 
     } 
     else 
     { 
      $("#nameSpan").html(''); 
     } 

     if(email1 == '') 
     { 
      $("#emailSpan").html('Email is required'); 
      return false; 
     } 
     else 
     { 
      $("#emailSpan").html(''); 
     } 
    });   
}); 

、私のコードで私を導いてください。事前に感謝します

Answer 1

ページの読み込み中に入力の値を1回だけチェックしています。毎回チェックする必要がありますので、この部分をonclick関数に移動させてください。

$(document).ready(function(){ 

    $("#submitBtn").on("click", function(){ 
     var name = $("#name").val(); 
     var email1 = $("#email1").val(); 

     if(name == '') 
     { 
      $("#nameSpan").html('Name is required'); 
      return false; 
     } 
     else 
     { 
      $("#nameSpan").html(''); 
     } 

     if(email1 == '') 
     { 
      $("#emailSpan").html('Email is required'); 
      return false; 
     } 
     else 
     { 
      $("#emailSpan").html(''); 
     } 
    });   
});