Question

我添加了html验证，并且需要在按钮点击时使用所有js方法。这里的onclick方法即使字段未填充也会触发..（它显示了需要字段的警报，但也执行了点击方法）

  <form >
    <input class="form-control" type="text" id="to" placeholder = "directed to: Admin" required>
    <input class="form-control" type="text" id="header" placeholder = "message heading" required>
    <textarea class="form-control" id="content" rows="3" placeholder = "message body" required></textarea>
    <button type="submit"  class="btn btn-warning" onclick="saveMessage()" >Search</button></form>

js功能

 function saveMessage(){
    var to = document.getElementById('to').value;
             var header = document.getElementById('header').value;
             var body = document.getElementById('content').value;
             var xhttp = new XMLHttpRequest();
             xhttp.onreadystatechange= function(){
                 if(xhttp.readyState===4 & xhttp.status===200){
                    swal("Success!", "Submitted the message successfully!", "success");

                 }
             };
             xhttp.open("POST","addCusMessage?valto="+to+"&valheader="+header+"&valbody="+body,true);
             xhttp.send();
         } 

  </script>

Answer 1

带有＆＃34;必填＆＃34;的字段必须在提交表单之前填写属性值。

您没有提交表单：您正在读取字段的值并使用这些值来构建XMLHttpRequest。

您应该测试saveMessage（）函数中字段的值，例如（仅针对标题字段的示例）

if(header == "") {
    alert("Header cannot be empty");
} else {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange= function(){
         if(xhttp.readyState===4 & xhttp.status===200){
                swal("Success!", "Submitted the message successfully!", "success");

             }
         };
     xhttp.open("POST","addCusMessage?valto="+to+"&valheader="+header+"&valbody="+body,true);
      xhttp.send();
}

Answer 2

我刚刚在js函数中添加了验证，它解决了这个问题。谢谢

在jsp

2 个答案: