jqueryを使用して追加したフォームに検証を適用します

Question

フォームに姓、名字、電子メールのフィールドがあります。 ユーザーがボタンをクリックすると、同じ3つのフィールドを持つ別の人物が追加されるコードを追加しました。これは完璧に動作します。

私はこれらの3つのフィールドで（必要な）バリデーションを適用しました。

私が直面している問題は、フィールドを追加して別の人物を追加するときにクリックされたときですが、検証部分は機能しません。

追加されたユーザーに必要な検証を追加します。

ありがとうございます。

ここに私のコードです。

<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

は

ちょうど必要な書き込み "" =必要書き込まないでください。