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(''); 
     } 
    });   
});