单击提交按钮进行HTML表单验证
[英]HTML form validation on click of submit button
问题描述
我正在尝试创建一个HTML表单，并且在我的“提交”按钮上，它必须验证是否所有字段都已填写，然后必须将详细信息附加到下面显示的表格中。 但是在验证表单时，即使正确填写了所有详细信息，我也无法理解为什么将数据添加到表中
下面是使用中的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment</title>
<style>
table{
width: 100%;
margin: 25px 0;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #6C220B;
}
table th, table td{
padding: 8px;
text-align: left;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Assignment on Javascript and Jquery:</h1>
<h2>Details form :</h2>
<form action="#" method="post" name="form">
<div class="form-group" required>
<label for="First Name">First Name:</label>
<input type="text" class="form-control" id="fn" placeholder="Enter your first name" name="firstname" required="" >
</div>
<div class="form-group">
<label for="Last Name">Last Name:</label>
<input type="text" class="form-control" id="sn" placeholder="Enter your last name" name="lastname" required="" >
</div>
<div class="form-group">
<label for="Date of birth">Date of birth:</label>
<input type="date" class="form-control" id="dob" placeholder="Enter your date of birth" name="dateofbirth" required="" >
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="em" placeholder="Enter your email id" name="email" required="" >
</div>
<div class="form-group">
<label for="Phone Number">Phone Number:</label>
<input type="text" class="form-control" id="phn" placeholder="Enter your phone number" name="phonenumber" required="" >
</div>
<input type="submit" class="row" value="Click to Add Row">
</form>
<br>
<h2>The table of data :</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Date of birth</th>
<th>Email</th>
<th>Phone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Durai</td>
<td>Saravanan</td>
<td>16/01/1996</td>
<td>durairaj1696@gmail.com</td>
<td>9789879736</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function validateForm() {
var isValid = true;
$('.form-group').each(function() {
if ( $(this).val() === '' )
isValid = false;
});
return isValid;
}
$(document).ready(function(){
$(".row").click(function(){
var firstname = $("#fn").val();
var lastname = $("#sn").val();
var dob = $("#dob").val();
var email = $("#em").val();
var phonenumber = $("#phn").val();
var markup = "
<tr>
<td>" + firstname + "</td>
<td>" + lastname + "</td>
<td>" + dob + "</td>
<td>" + email + "</td>
<td>" + phonenumber + "</td>
</tr>";
if(validateForm())
{
$("table tbody").append(markup);
}
});
});
</script>
</body>
</html>
3 个解决方案
解决方案1
0 已采纳 2018-09-28 07:39:46
我已经对jQuery进行了一些修改。
- 输入字段的值已验证
- 单击按钮时不再提交表单
- 数据添加到表中的正确位置
function validateForm() { var isValid = true; $('.form-group input').each(function() { //console.log($(this).val()); if ($(this).val() === '') isValid = false; }); return isValid; } $(document).ready(function() { $(".row").click(function() { var firstname = $("#fn").val(); var lastname = $("#sn").val(); var dob = $("#dob").val(); var email = $("#em").val(); var phonenumber = $("#phn").val(); var markup = "<tr><td>" + firstname + "</td><td>" + lastname + "</td><td >" + dob + "</td><td>" + email + "</td><td>" + phonenumber + "</td></tr>"; if (validateForm()) { $('.table tr:last').after(markup); /* Changed */ } return false; /* Do not submit the form */ }); });
table { width: 100%; margin: 25px 0; border-collapse: collapse; } table, th, td { border: 1px solid #6C220B; } table th, table td { padding: 8px; text-align: left; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div class="container"> <h1>Assignment on Javascript and Jquery:</h1> <h2>Details form :</h2> <form action="#" method="post" name="form"> <div class="form-group" required> <label for="First Name">First Name:</label> <input type="text" class="form-control" id="fn" placeholder="Enter your first name" name="firstname" required=""> </div> <div class="form-group"> <label for="Last Name">Last Name:</label> <input type="text" class="form-control" id="sn" placeholder="Enter your last name" name="lastname" required=""> </div> <div class="form-group"> <label for="Date of birth">Date of birth:</label> <input type="date" class="form-control" id="dob" placeholder="Enter your date of birth" name="dateofbirth" required=""> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="em" placeholder="Enter your email id" name="email" required=""> </div> <div class="form-group"> <label for="Phone Number">Phone Number:</label> <input type="text" class="form-control" id="phn" placeholder="Enter your phone number" name="phonenumber" required=""> </div> <input type="submit" class="row" value="Click to Add Row"> </form> <br> <h2>The table of data :</h2> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Date of birth</th> <th>Email</th> <th>Phone Number</th> </tr> </thead> <tbody> <tr> <td>Durai</td> <td>Saravanan</td> <td>16/01/1996</td> <td>durairaj1696@gmail.com</td> <td>9789879736</td> </tr> </tbody> </table> </div>
解决方案2
0 2018-09-28 07:42:55
提交表单时，网页将重新加载。 如果停止此事件，则代码将开始工作。 只需以您的形式添加参数： onsubmit="return false;"
<form action="#" method="post" name="form" onsubmit="return false;">{content}
解决方案3
0 2018-09-28 07:57:44
您已添加了“提交类型”按钮，这就是为什么它不会将表格数据添加到表中的原因；如果将类型更改为按钮，那么它将起作用，
<input type="button" class="row" value="Click to Add Row">
必需的属性仅与“提交”按钮一起使用，因此必需的验证必须从javascript中手动添加。
在不使用提交按钮的情况下触发标准 HTML5 验证（表单）？
[英]Trigger standard HTML5 validation (form) without using submit button?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.