This question already has an answer here:
I have a form with fields with firstname, last name and email. I have added a code in which when user clicks a button it adds the another person with same three fields. This works perfect.
Apart from it i have applied (required) validations on these three fields.
The problem i am facing is when i clicks on add another person it adds the fields and but the validations part is not working.
I want to add the required validations on the added person.
Thanks in advance.
Here is my code.
<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>
</div>
