Apply Validation on the added form using jquery

Question

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>

Please find [this fiddle](http://jsfiddle.net/Yy2gB/10/) and this [question](http://stackoverflow.com/q/20561712/2534646) — Curiousdev, Apr 25 '17 at 04:40
this is not the same as i want to add another person until i fill all the required fields of the last form. As it adds the another person whether i have filled the previous fields or not. — Mario, Apr 25 '17 at 04:48

score -1 · Answer 1 · answered Apr 25 '17 at 04:36

-1

Don't write required=""

Just write required.

answered Apr 25 '17 at 04:36

chigs

178
2
12

What if the field is required to be entered? – Saurabh Sharma Apr 25 '17 at 04:37
The "required" keyword automatically takes care of it, You don't need to set its value. – chigs Apr 25 '17 at 04:41
That will just work for the first occurrence of the named array. And required is for default HTML5 form validation. – Saurabh Sharma Apr 25 '17 at 04:43
I have changed it to required as well but its not working – Mario Apr 25 '17 at 04:43
I recheck your code, the second " – chigs Apr 25 '17 at 04:48
i mean – chigs Apr 25 '17 at 04:55
it working when i am clicking on add new person button first time – Mario Apr 25 '17 at 05:03
you can chek the working on http://jsfiddle.net/Yy2gB/10/ – Mario Apr 25 '17 at 05:04
@Mario Here's what you need to do http://stackoverflow.com/a/43601748/1681154 – Saurabh Sharma Apr 25 '17 at 08:43
@SaurabhSharma: No, because this form adds another employee whether the previous fields are empty or filled. I want the form to be like the user can't add the new fields(by clicking the add employer button) until the previous fields are filled and it shows error(validations) if any of the filled fields is wrong or empty – Mario Apr 26 '17 at 04:35

Apply Validation on the added form using jquery

1 Answers1