jquery - 如果用户未在表单中输入任何内容，如何避免服务器回复

Question

下面是我的表单代码和 jquery 代码:

 <div id="mini">
 <p><span class="italics">Please complete the form</span></p>
 <fieldset>
<form id="appForm" onsubmit="askServer();return false;">
 <label for="Name">Name </label> <br>
 <input id="name" name="name" placeholder="Han Solo" > <br>
 <label for="e-mail"> Email</label> <br>
 <input name="email" id="email" placeholder="example@uiowa.edu" > <br> 
 <label for ="Birthdate">Birth Date</label><br>
 <input name="bday" id="datepicker" placeholder="mm/dd/yyyy">        
 </fieldset><br>
 <input class="btn-style" type="submit" value="Submit Application">
 </form>
     <p id="Sreply"></p>
     <script>
      function askServer() {

 var http = new XMLHttpRequest();
 var sname=document.getElementById("name").value;
  var semail=document.getElementById("email").value;
 var sbirth=document.getElementById("datepicker").value;
 var url = "submit.php";
 var params = "?name="+sname+"&email="+semail+"&bday="+sbirth;
 var url = url+params;
 http.open("GET", url, true);

 //Send the proper header information along with the request
 http.setRequestHeader("Content-type", "application/x-www-form-  urlencoded");
 http.setRequestHeader("Content-length", params.length);
 http.setRequestHeader("Connection", "close");

  http.onreadystatechange = function() {//Call a function when the   state changes.
  if(http.readyState == 4 && http.status == 200) {
    document.getElementById("Sreply").innerHTML = " "+      http.responseText;
   }
   }
   http.send(params);
    }
    </script>
     </div>

所以问题是当我点击提交申请时，空白字段我仍然得到回复。有没有合法的方法来避免这种情况？这是我的 Website 的链接。我知道在姓名、电子邮件和日期的表单中添加“必填”可以避免这种情况，但是还有其他方法吗？

Answer 1

处理此问题的常用方法是使用客户端 Javascript 检查表单的一般有效性，通知用户表单不完整，然后不要将其提交到服务器。

您仍然需要在收到时验证服务器上的所有表单元素，以防客户端检查被绕过，但这不应该是通常的情况。

并且，您还需要在提交处理程序中使用 e.preventDefault() 来停止表单的默认提交。

<script>
    function askServer(e) {
        // prevent submission of the form except via the Ajax call
        e.preventDefault();
        var http = new XMLHttpRequest();
        var sname = document.getElementById("name").value;
        var semail = document.getElementById("email").value;
        var sbirth = document.getElementById("datepicker").value;
        if (sname && semail && sbirth) {
            var url = "submit.php";
            var params = "?name=" + sname + "&email=" + semail + "&bday=" + sbirth;
            url = url + params;
            http.open("GET", url, true);
            //Send the proper header information along with the request
            http.setRequestHeader("Content-type", "application/x-www-form-  urlencoded");
            http.setRequestHeader("Content-length", params.length);
            http.setRequestHeader("Connection", "close");
            http.onreadystatechange = function () { //Call a function when the   state changes.
                if (http.readyState == 4 && http.status == 200) {
                    document.getElementById("Sreply").innerHTML = " " + http.responseText;
                }
            }
            http.send(params);
        } else {
            // show some sort of error indication to the user here
        }
    }
</script>