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

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

不写所需= “”

只写需要。