单击添加按钮时，会动态添加新输入。但是，当提交表单时，仅验证第一个输入字段。如何验证动态添加的输入？
下面是我的代码:
<body>
<section class="container">
<div class="majors">
<h1>Department</h1>
</div>
<form class="hform" id="selectForm" action="/action_page.php">
<select name="Department">
<option value="Sociology" selected>Sociology</option>
<option value="Science">Science</option>
<option value="Humanities">Humanities</option>
<option value="Linguistics">Linguistics</option>
</select>
<div class="sbutton">
<input type="button" id="submit_form" value="submit" />
</div>
<button class="delete" type="button" value="delete">Delete</button>
</form>
</section>
<section class="container">
<form class="cmxform" id="commentForm" method="get" action="form-handler.html" autocomplete="">
<fieldset>
<div class="form-copy-wrap">
<input class="checkbox" type="checkbox" />
<p>
<label for="aname">Name</label>
<input name="name[]" minlength="5" type="text" required/>
</p>
<p>
<label for="aemail">Email</label>
<input name="email[]" type="email" required/>
</p>
<p>
<label for="aage">Age</label>
<input name="age[]" type="number" required/>
</p>
</div>
<div class="input_fields_wrap">
<div class="addButton">
<button type="button" value="add">Add</button>
</div>
</div>
</fieldset>
</form>
</section>
<script>
$("#submit_form").on('click', function (e) {
e.preventDefault();
$("form#commentForm").submit();
$(".form-copy-wrap").submit();
});
$("form#commentForm").validate({
rules: {
name: "required",
email: {
required: true,
email: true,
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e303f333b1e3a31333f3730703d3133" rel="noreferrer noopener nofollow">[email protected]</a>"
}
}
});
</script>
<script>
$(document).ready(function () {
var max_fields = 10;
var counter = 0;
$('.addButton').on('click', function () {
counter++;
if (counter >= max_fields) {
console.log('You have reached a max limit fields')
return;
}
var copy = $('.form-copy-wrap').first().clone();
$("#commentForm fieldset").append(copy);
});
$('.delete').on('click', function () {
$('input:checkbox').each(function () {
if ($(this).is(':checked')) {
$(this).closest('.form-copy-wrap').remove();
}
});
});
});
</script>
</body>
最佳答案
请将点击事件替换为此事件
$('.addButton').on('click', function () {
counter++;
if (counter >= max_fields) {
console.log('You have reached a max limit fields')
return;
}
var copy = $('.form-copy-wrap').first().clone();
$("#commentForm fieldset").append(copy);
var form = $("#commentForm");
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(document);
});
关于jquery - 验证动态添加的字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45030892/