Question

我的表单中包含姓名，姓氏和电子邮件的字段。我添加了一个代码，当用户单击一个按钮时，它会添加另一个具有相同三个字段的人。这很完美。

除此之外，我已在这三个字段上应用（必需的）验证。

我面临的问题是，当我点击添加另一个人时，它会添加字段，但验证部分不起作用。

我想在添加的人身上添加必要的验证。

提前致谢。

这是我的代码。

<form name="AttendeeForm" id="AttendeeForm" action="" method="post" >
<div class="block" id="Attendent-list"> 
<div class="col-md-12 col-lg-12">
<div class="col-md-12 col-lg-12">
<h3 class="heading">Who's Attending?</h3>
</div>
<div class="col-md-3 col-lg-3">
<label for="first_name">First Name<span class="">*</span></label><br>
<input id="first_name" value="" class="field" name="fname[]" type="text" placeholder="First Name" required=""><br>
<p id="FNameerror"></p>
</div>
<div class="col-md-3 col-lg-3">
<label for="last_name">Last Name<span class="">*</span></label><br>
<input id="last_name" value="" class="field" name="lname[]" type="text" placeholder="Last Name" required="">
<p id="LNameerror"></p>
</div>
<div class="col-md-6 col-lg-6">
<label for="email">Email<span class="">*</span></label><br>
<input id="email" value="" class="field" type="email" name="email[]" placeholder="me@example.com" required="">
<p id="Emailerror"></p>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12">
<fieldset id="add_another_person" class="add-person">
<input type="button" name="add_person_button" class="add_person_button button-ghost" id="add_person_button" value="Add Another Person">
</fieldset>
</div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$('.add_person_button').click(function() {
var abc=$("#AttendeeForm").valid();

if(abc == true){
$('.block:last').after('<div class="block" id="Attendent-list" style="clear: both;"><div style="clear:both;"><div class="col-md-12"><div class="col-md-3"><label for="first_name">First Name<span class="">*</span></label><input id="first_name_'+personcounter+'" value="" class="field" name="fname[]" type="text" placeholder="First Name" required=""><p id="FNameerror"></p></div><div class="col-md-3"><label for="last_name">Last Name <span class="">*</span></label><input id="last_name_'+personcounter+'" value="" class="field" name="lname[]" type="text" placeholder="Last Name" required=""><p id="LNameerror"></p></div><div class="col-md-6"><label for="email">Email <span class="">*</span></label><input id="email_'+personcounter+'" value="" class="field" type="email" name="email[]" placeholder="me@example.com" required=""><p id="Emailerror"></p></div></div></div><div class="col-md-12"><br></div><div style="clear:both;"></div><div class="col-md-12"><br><br></div><div style="clear:both;"><div class="col-md-12"><div class="col-md-4"><input type="button" name="delete_person_button" id="remove_registrant_36391" class="delete_person_button button-ghost" value="Remove this Person"></a></div></div></div><div class="col-md-12"><div class="col-md-12"><br><hr><br></div></div></div>');
}
});

$('#AttendeeForm').validate();
$('input[type="text"]').each(function () {
$(this).rules('add', {
required: true
});
});
</script>

Answer 1

不要写必需=“”

只需要写。

使用jquery在添加的表单上应用验证

1 个答案: