jQuery classname validation not working for dynamically generated text fields - php

Question

I am facing a problem with jQuery Validation to validate the ajax (dynamically) generated text fields...
Here is the snippet of the HTML code
<form name="booking" id="booking" method="post" action="">
<ul>
<li>
<span>Mobile Number</span>
</li>
<li>
<input type="tel" name="mobile" id="mobile" class='form_mobile'/>
</li>
<li>
<span>Number of male tickets</span>
</li>
<li>
<select name="male_qunatity" id="male_qunatity" >
</select>
</li>
</ul>
</form>
Jquery validation script is here
$(document).ready(function(){
Here is the ajax call starts
$('#male_qunatity').change(function() {
var male_tickets = $(this).val();
var mobile = $('#mobile').val();
var path = '<?php echo site_url() ?>';
ajaxurl = path + '/wp-admin/admin-ajax.php';
var data = {
action: 'get_quantity',
qty: male_tickets,
mobile: mobile
};
$.post(ajaxurl, data, function(response) {
$('#m_attendees').html(response);
});
}); //END dropdown change event
$("#booking").validate({
});
$('.form_mobile').each(function() {
$(this).rules('add', {
required:true,
number:true,
messages: {
required:"Please enter a mobile number",
number:"Only numbers allowed"
}
});
});
});//validation ends
Here is the ajax code to text-boxes based on the count selected
$quantity= $_REQUEST['qty'];
$mobile= $_REQUEST['mobile'];
$pass = "<table>";
for($i =0; $i<$quantity; $i++ ){
$pass .= "<tr>
<td>
<input type='text' id='mobile-".$i."' class='form_mobile' name='mmobile[]'>
</td>
</tr>";
}
$pass .= "</table>";
echo $pass;
FYI: The form validation is working fine for the form fields, except the dynamically created fields..
How to solve this one?
Any suggestions would be greatly appreciated..

Answer 1

1) Since jQuery Validate depends on the name attribute, you'll need to alter your PHP to ensure that every name is unique. Note the index, $i, added to the name attribute...
"... <input type=text id='mobile-".$i."' name='mmobile[".$i."]' class='form_mobile'> ..."
(you're also missing quotes around text; should be type='text')
2) When creating fields dynamically, you would call .rules('add') AFTER the fields are dynamically created. In your case, here...
$.post(ajaxurl, data, function(response) {
$('#m_attendees').html(response); // <- create the new fields
$('.form_mobile').each(function() { // <- then dynamically add the rules
$(this).rules('add', {
required:true,
number:true,
messages: {
required:"Please enter a mobile number",
number:"Only numbers allowed"
}
});
});
});
3) .validate() is the initialization method for the plugin on your form. Just call it once when the DOM loads. (.validate() does not get called repeatedly when the form is validated, because validation is automatic once the plugin is properly initialized.)
$(document).ready(function() { // <- DOM is ready
$("#booking").validate({ // <- initialize plugin on your form
// your options // <- plugin options
});
});