2017-09-21 111 views
0

我想創建一個窗體,驗證與jQuery驗證插件。 我已成功實施驗證,因此它會檢查我想要的表單的區域,但是現在表單在表單輸入區域填入後將不會提交。有人可以請提供一些建議,告訴我如何能夠使其提交一次驗證。jQuery驗證不會提交後檢查

也沒有必要,但會很好是我想錯誤消息標籤顯示在窗體區域的右側或底部。這裏是我的代碼,任何意見將不勝感激PS我是一個新手抱歉格式不好。

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"> 
</script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional- 
methods.min.js"></script> 

<!------- Web page Content ------> 


      <div id="content"> 


     <h2> Register with GTB Financial Solutions </h2> 

     <form method="post" action="post-test.php" id="myform" name="myform" onsubmit="return validate();"> 

     How to maximise profits on managed funds<input type="checkbox" name="chkbox"><br> 
     Minimising tax in the new environment<input type="checkbox" name="chkbox"><br> 
     Measuring stock momentum<input type="checkbox" name="chkbox"><br> 
     Economic forecasts<input type="checkbox" name="chkbox"><br> 
     Creative accounting for management<input type="checkbox" name="chkbox"><br> 
     The exciting new features of the ATO web site<input type="checkbox" name="chkbox"><br><br>  
     <label for="Fname">First Name</label><br> 
     <input type="text" name="Fname" id="Fname"><br> 
     <label for="Lname">Last Name</label><br> 
     <input type="text" name="Lname" id="Lname"><br> 
     <label for="Phone">Phone Number</label><br> 
     <input type="text" name="Phone" id="Phone"><br> 
     <label for="E-mail">E-mail Address</label><br> 
     <input type="email" name="email" id="email"><br> 
     <label for="Address">Address</label><br> 
     <input type="text" name="Address" id="Address"><br> 



     <input type="submit" value="submit"> 
    </form> 
    <script> 

    jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid", 
    submitHandler: function() { 
     alert("submitted!"); 
     } 
    }); 
    $("#myform").validate({ 
     rules: { 
      chkbox: { 
       required: true, 
      }, 
      Fname: "required", 
      Lname: "required", 
      Phone: "required", 
      Address: "required", 
      email: { 
       required: true, 
       email: true 
      }, 

     }, 
     messages: { 
      Fname: "Please enter your firstname", 
      Lname: "Please enter your lastname", 
      Phone: "Please enter your phone number", 
      email: "Please enter a valid email address" 

     } 
    }); 

</script> 


      </div> 

    </div> 
+1

這有什麼做用PHP – mrid

+0

的編輯請求會更好@mrid作爲用戶是新的Stackoverflow –

回答

0

通過jQuery.validator.setDefaults設置debug : true你是在告訴你要調試,做不希望現在就提交表單的jQuery驗證插件。

設置debugfalse

而且從onsumbit

+0

我已經刪除了返回validate()並將調試設置爲false,但它只是提供了警報b牛在成功的驗證,並不會繼續到形式的行動post-test.php – randsie

+0

也許有一些其他的錯誤,通過按f12打開開發者控制檯,並檢查是什麼錯誤得到?我複製粘貼相同的代碼,並執行以下2個步驟,然後重定向! – gabbarsingh

+0

我找不到在開發人員工具中查看重定向到post-test.php的位置,但我調整了代碼。當我改變 submitHandler:function(){ alert(「submitted!」); } – randsie

0

其工作刪除return validate(),剛剛從表單中刪除onsubmit="return validate();"

jQuery.validator.setDefaults({ 
 
    debug: true, 
 
    success: "valid", 
 
    submitHandler: function() { 
 
    alert("submitted!"); 
 
    } 
 
}); 
 
$("#myform").validate({ 
 
    rules: { 
 
    chkbox: { 
 
     required: true, 
 
    }, 
 
    Fname: "required", 
 
    Lname: "required", 
 
    Phone: "required", 
 
    Address: "required", 
 
    email: { 
 
     required: true, 
 
     email: true 
 
    }, 
 

 
    }, 
 
    messages: { 
 
    Fname: "Please enter your firstname", 
 
    Lname: "Please enter your lastname", 
 
    Phone: "Please enter your phone number", 
 
    email: "Please enter a valid email address" 
 

 
    } 
 
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"> 
 
</script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional- 
 
methods.min.js"></script> 
 

 
<!------- Web page Content ------> 
 

 

 
<div id="content"> 
 

 

 
    <h2> Register with GTB Financial Solutions </h2> 
 

 
    <form method="post" action="post-test.php" id="myform" name="myform" > 
 

 
    How to maximise profits on managed funds<input type="checkbox" name="chkbox"><br> Minimising tax in the new environment<input type="checkbox" name="chkbox"><br> Measuring stock momentum<input type="checkbox" name="chkbox"><br> Economic forecasts 
 
    <input 
 
     type="checkbox" name="chkbox"><br> Creative accounting for management<input type="checkbox" name="chkbox"><br> The exciting new features of the ATO web site<input type="checkbox" name="chkbox"><br><br> 
 
     <label for="Fname">First Name</label><br> 
 
     <input type="text" name="Fname" id="Fname"><br> 
 
     <label for="Lname">Last Name</label><br> 
 
     <input type="text" name="Lname" id="Lname"><br> 
 
     <label for="Phone">Phone Number</label><br> 
 
     <input type="text" name="Phone" id="Phone"><br> 
 
     <label for="E-mail">E-mail Address</label><br> 
 
     <input type="email" name="email" id="email"><br> 
 
     <label for="Address">Address</label><br> 
 
     <input type="text" name="Address" id="Address"><br> 
 

 
     <input type="submit" value="submit"> 
 
    </form> 
 

 
</div>