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"> 

そしてタグの中に、あなたはアクション

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

Answer 2

は新しい機能を作成して、あなたの関数のmyformsubmitからこれを呼び出す必要があります。

function checkvalidate() { 
    var flag = false; 
    if (name == ''||mail == ''|| reason == ''||contact == ''){ 
      flag = false; 
     } 
else 
{ 
flag = true; 
} 
    return flag; 
    function myformsubmit() { 
      var flag = checkvalidate(); 
      if(flag == true) 
    { 
    success code. 
    } 
    else 
    { 
    error message 
    } 

    }