jQuery驗證不能在聯繫表格中工作

Question

我想通過jQuery進行驗證。我有兩個字段名稱和電子郵件。電子郵件空白字段驗證不起作用。

這裏是我的代碼，

<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

您在頁面加載時只檢查一次輸入值。我們需要每次檢查它們，讓我們把這部分移到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(''); 
     } 
    });   
});