HTML5 表单验证具有多个 sumbit 的多个表单

嗨，我有两个div，其中包含一个输入字段，并在提交时提交单击其切换开关，因此第一个包含电话号码，提交时提交单击将显示另一个包含OTP字段的div，并在此处提交我的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 表示切换，所以我不能使用单个提交也尝试多种方式。

更改此行

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

首先，你不应该有两个提交按钮。第一个按钮只是在表单数据输入过程中进一步推进，因此它应该只是一个常规按钮。

然后，在实际的提交按钮上，你已经设置了一个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>

相关内容

最新更新

热门标签：