【问题标题】：html5 form validation multiple forms with multiple sumbithtml5表单验证多个表单与多个提交
【发布时间】：2019-12-07 03:31:09
【问题描述】：
您好，我有两个 div，其中包含一个输入字段并在提交时提交单击它的切换，因此第一个包含电话号码并在提交单击时提交将显示另一个包含 otp 字段的 div 并在此处提交我的 html5 表单验证不起作用。那么如何通过两个单独的提交来执行两个表单的验证，提交点击写入逻辑用于切换。在代码sn-p第一个表单电话号码中它的跳过验证
$("#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 用于切换，所以我不能使用单次提交也可以尝试多种方式。
【问题讨论】：
标签：
javascript
jquery
html
【解决方案1】：
改变这一行
<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>
【解决方案2】：
首先，您不应该有两个提交按钮。第一个按钮只是在表单数据输入过程中进一步推动您，因此它应该只是一个常规按钮。
然后，在实际的提交按钮上，您已经设置了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>