javascript - HTML5 验证无效

Question

我已经制作了联系表。在此表单中，我添加了输入验证，例如电子邮件文本框的电子邮件和联系人文本框中电话号码 10 的最大长度。但这些验证在我的案例中不起作用。
我做错了什么？

AJAX 调用

function myformsubmit() {
    var name = document.getElementById("name").value;
    var mail = document.getElementById("mail").value;
    var contact = document.getElementById("contact").value;
    var reason = document.getElementById("reason").value;
    // Returns successful data submission message when the entered information is stored in database.
    var dataString = 'name1=' + name + '&mail1=' + mail + '&contact1=' + contact+ '&reason1=' + reason;

    if (name == ''||mail == ''|| reason == ''||contact == ''){
        alert("Please Fill all fields");
    }else{
        // AJAX code to submit form.
        $.ajax({
            type    : "POST",
            url     : "http://test1.com/wp-content/themes/suave/theme_option/1.php",
            data    : dataString,
            cache   : false,
            success : function(html) {
                alert(html);
                window.location="http://test1.com";
            }
        });
    }
    return false;
}

@media screen and (max-width: 972px) and (min-width: 100x) {
  .exitpopup-modal-window {
    display: none;
  }
}
#exitpopup-modal .modal-body {
  padding: 0px;
}
.modal-body {
  padding: 0px;
}
.second img {
  width: 369px;
  height: 404.6px;
  margin-top: -1%;
}
.first form {
  display: table;
  margin-left: 34px;
  margin-top: 43px;
}
.row1 {
  font-size: 10px;
  font-family: inherit;
  display: table-row;
  border: 2px solid red;
}
.row1 #name,
#mail,
#contact {
  color: black;
  width: 260px;
  height: 34px;
  padding: 6px 12px;
  border-radius: 3.9px;
  border-color: #777;
  display: table-cell;
}
.row1 textarea {
  width: 260px;
  height: 110px;
  color: black;
  border-color: #777;
  display: table-cell;
}
.row1 #submit {
  width: 152px;
  height: 44px;
  margin-left: 15%;
  background-color: #337ab7;
  color: white;
  border-color: none;
}
.row1 #submit:hover {
  width: 152px;
  height: 44px;
  margin-left: 15%;
  background-color: white;
  color: #337ab7;
  border-color: none;
}
.second,
.first {
  float: left;
}
.clearfix {
  clear: both
}
.first span {
  margin-left: 25%;
  font-family: inherit;
  font-size: 15px;
  padding-top: 3px;
}
<div class="exitpopup-modal-window">
  <div class="second">
    <img src="http://www.buildzar.com/listing-assets/images/home-new/get-quote/bg-lead-form-web.png">
  </div>
  <div class="first">
    <span>We are there to help you</span>
    

<form id="form" name="theform">
      <div class="row1">
        <input id="name" type="text" placeholder="Your name *" required>
        <br>
        <br>
      </div>
      <div class="row1">
        <input type="email" id="mail" placeholder="Your email *" required>
        <br>
        <br>
      </div>
      <div class="row1">
        <input id="contact" type="number" maxlength="10" placeholder="Your  phonenumber*" required>
        <br>
        <br>
      </div>
      <div class="row1">
        <textarea id="reason" rows="5" placeholder="Any reason to leave ?*" required></textarea>
        <br>
        <br>
      </div>
      <div class="row1">
        <input id="submit" onclick="myformsubmit()" type="button" value="Submit">
      </div>
    </form>
  </div>
  <div class="clearfix"></div>

Answer 1

你的按钮类型应该是提交。

 <input id="submit"  type="submit" value="Submit">

在 for 标签内你应该有 Action

<form id="form" name="theform" action="javascript:myformsubmit()">