html5表單驗證具有多個sumbit的多個表單
[英]html5 form validation multiple forms with multiple sumbit
問題描述
嗨，我有兩個 div，其中包含一個輸入字段並在提交時提交單擊其切換，因此第一個包含電話號碼並在提交時提交將顯示另一個 div，其中包含 otp 字段並在此處提交我的 html5 表單驗證不起作用。 那么如何通過兩個單獨的提交對兩個表單執行驗證，提交點擊為切換編寫邏輯。在代碼片段中，第一個表單電話號碼跳過驗證
$("#num").click(function () { $("#otpdiv").show(); $("#numberdiv").hide(); }); $("#otpbutton").click(function() { $("#otpdiv").hide(); $("#detailsdiv").show(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <!doctype html> <html lang="en" class="no-focus"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title>Users</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:300,400,400i,600,700"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/isthara.css"> </head> <body> <form id="ebcharge"> <div class="row"> <div class="col-sm-12 text-center isthara-header"> <img class="logo" src="https://erp.isthara.com/assets/IstharaLogoNew1.png" width="10%" /> </div> <div class="col-sm-12 isthara-welcome" id="numberdiv"> <h1>Welcome to the EB Charge</h1><br><br><br><br> Phone Number: <input type="tel" value="" pattern="^[789]\\d{9}$" maxlength="10" placeholder="Enter Number" required><br><br> <input id="num" type="submit" value="submit" required> </div> <div class="col-sm-12 isthara-welcome" id="otpdiv" style="display: none;"> <h1>Welcome to the EB Charge</h1><br><br><br><br> OTP: <input type="tel" value="" placeholder="Enter Number" required><br><br> <input type="submit" id="otpbutton" value="submit"> </div> <div class="col-sm-12 isthara-welcome" id="detailsdiv" style="display: none; margin: 30px;padding: 10px;"> <table class="table table-striped"> <tbody> <tr> <th scope="row">Name</th> <td>Godwin </td> </tr> <tr> <th scope="row">Property</th> <td>Godwin </td> </tr> <tr> <th scope="row">Room number</th> <td>Godwin </td> </tr> <tr> <th scope="row">Bed number</th> <td>Godwin </td> </tr> <tr> <th scope="row">Wallet amount balance</th> <td>Godwin </td> </tr> <tr> <th scope="row">KWH (G)</th> <td>Godwin </td> </tr> <tr> <th scope="row">Last read date and time</th> <td>Godwin </td> </tr> <tr> <th scope="row">Remarks - mandatory</th> <td>Godwin</td> </tr> </tbody> </table> </div> </div> </form> <script src="lib/jquery/jquery.min.js"></script> <script src="js/main.js"></script> </body> </html>
c 切換所以我不能使用單一提交也嘗試多種方式。
2 個解決方案
解決方案1
0 2019-12-06 19:18:27
首先，你不應該有兩個提交按鈕。 第一個按鈕只是讓您在表單數據輸入過程中進一步前進，因此它應該只是一個常規按鈕。
然后，在實際的提交按鈕上，您已經設置了一個click事件處理程序，但是對於submit按鈕，您希望處理表單的submit事件。
話雖如此，您實際上是否在任何地方提交任何數據？ 如果沒有，那么您不應該使用任何提交按鈕或表單，而應該使用常規按鈕。
筆記：
您還required提交按鈕，它沒有任何作用，不能要求按鈕。
$("#num").click(function () { // Force the form to validate if($("#txtTel")[0].checkValidity()){ $("#otpdiv").show(); $("#numberdiv").hide(); } else { // Show validity message $("#txtTel")[0].reportValidity(); } }); // It's the submit event of the form you need here $("#ebcharge").submit(function() { $("#otpdiv").hide(); $("#detailsdiv").show(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <!doctype html> <html lang="en" class="no-focus"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title>Users</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:300,400,400i,600,700"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/isthara.css"> </head> <body> <form id="ebcharge"> <div class="row"> <div class="col-sm-12 text-center isthara-header"> <img class="logo" src="https://erp.isthara.com/assets/IstharaLogoNew1.png" width="10%" /> </div> <div class="col-sm-12 isthara-welcome" id="numberdiv"> <h1>Welcome to the EB Charge</h1><br><br><br><br> Phone Number: <input type="tel" id="txtTel" pattern="^[789]\\d{9}$" maxlength="10" placeholder="Enter Number" required><br><br> <input id="num" type="button" value="Continue"> </div> <div class="col-sm-12 isthara-welcome" id="otpdiv" style="display: none;"> <h1>Welcome to the EB Charge</h1><br><br><br><br> OTP: <input type="tel" value="" placeholder="Enter Number" required><br><br> <input type="submit" id="otpbutton" value="submit"> </div> <div class="col-sm-12 isthara-welcome" id="detailsdiv" style="display: none; margin: 30px;padding: 10px;"> <table class="table table-striped"> <tbody> <tr> <th scope="row">Name</th> <td>Godwin </td> </tr> <tr> <th scope="row">Property</th> <td>Godwin </td> </tr> <tr> <th scope="row">Room number</th> <td>Godwin </td> </tr> <tr> <th scope="row">Bed number</th> <td>Godwin </td> </tr> <tr> <th scope="row">Wallet amount balance</th> <td>Godwin </td> </tr> <tr> <th scope="row">KWH (G)</th> <td>Godwin </td> </tr> <tr> <th scope="row">Last read date and time</th> <td>Godwin </td> </tr> <tr> <th scope="row">Remarks - mandatory</th> <td>Godwin</td> </tr> </tbody> </table> </div> </div> </form> <script src="lib/jquery/jquery.min.js"></script> <script src="js/main.js"></script> </body> </html>
解決方案2
0 已采納 2019-12-06 19:31:09
改變這一行
<input id="num" type="submit" value="submit" required>
到那一行，驗證將完美運行
<input id="num" type="submit" name="numname" value="workingSubmit" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!doctype html> <html lang="en" class="no-focus"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title>Users</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:300,400,400i,600,700"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/isthara.css"> </head> <body> <form id="ebcharge"> <div class="row"> <div class="col-sm-12 text-center isthara-header"> <img class="logo" src="https://erp.isthara.com/assets/IstharaLogoNew1.png" width="10%" /> </div> <div class="col-sm-12 isthara-welcome" id="numberdiv"> <h1>Welcome to the EB Charge</h1><br><br><br><br> Phone Number: <input type="tel" value="" pattern="^[789]\\d{9}$" maxlength="10" placeholder="Enter Number" required><br><br> <input id="num" type="submit" name="avto" value="submit"> <input id="num" type="submit" name="numname" value="working Submit button" /> </div> <div class="col-sm-12 isthara-welcome" id="otpdiv" style="display: none;"> <h1>Welcome to the EB Charge</h1><br><br><br><br> OTP: <input type="tel" value="" placeholder="Enter Number" required><br><br> <input type="submit" id="otpbutton" value="submit"> </div> <div class="col-sm-12 isthara-welcome" id="detailsdiv" style="display: none; margin: 30px;padding: 10px;"> <table class="table table-striped"> <tbody> <tr> <th scope="row">Name</th> <td>Godwin </td> </tr> <tr> <th scope="row">Property</th> <td>Godwin </td> </tr> <tr> <th scope="row">Room number</th> <td>Godwin </td> </tr> <tr> <th scope="row">Bed number</th> <td>Godwin </td> </tr> <tr> <th scope="row">Wallet amount balance</th> <td>Godwin </td> </tr> <tr> <th scope="row">KWH (G)</th> <td>Godwin </td> </tr> <tr> <th scope="row">Last read date and time</th> <td>Godwin </td> </tr> <tr> <th scope="row">Remarks - mandatory</th> <td>Godwin</td> </tr> </tbody> </table> </div> </div> </form> </body> <script> $("#num").click(function () { $("#otpdiv").show(); $("#numberdiv").hide(); }); $("#otpbutton").click(function() { $("#otpdiv").hide(); $("#detailsdiv").show(); }); </script> </html>
對多個表單禁用HTML5表單驗證
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.