Vaildate dynamic added array inputs - jQuery Validate

Question

Good Afternoon,

Dynamic Fields are being added with jQuery and i am using jQuery Validate plugin to validate form.

Code to create dynamic fields depend on number of selected options from selectbox.

$('#ids_noct').on('change', function() {
  var tsd = ( this.value );
  for(var j=1; j <= tsd; j++) {
     $("#t").append("<input name="name_ct[]" id="id_ct' + j + '" type="text" 
   class="form-control" placeholder="Add Variant' + j + ' Name" >");
  }
});

jQuery code to validate:

$("#formsx").validate({
  rules: {
    "name_ct[]": {required: true}
  }

But with this only First field is getting validated not all.

Suppose if i have added 5 fields then 1 out of 5 is validates, not all.

Also, i want to know that can i upload image using PHP and jQuery Validate. });

Answer 1

You have a couple basic problems in your code. First, your append call doesn't have it's quotes set correctly - you can't start with a double quote and then include double quotes inside of it, it will throw an error. So, your call should look more like this:

$("#t").append('<input name="name_ct[]" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');

Secondly, you can't have inputs of type text with the same name attribute. So if you have 5 of these name_ct inputs, they each need to have their own name:

$("#t").append('<input name="name_ct'+j+'" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');

Finally, when you add a new field after $.validate has been called, you must also update the rules for it:

$('#ids_noct').on('change', function() {
  var tsd = ( this.value );
  for(var j=1; j <= tsd; j++) {
     $("#t").append('<input name="name_ct'+j+'" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');
     $('#id_ct'+j).rules('add',{
       required:true
     });
  }
});

Not knowing what exactly you want to do with these name_ct values, I can't say how you should recombine them, but in the submitHandler of $.validate, you can change the data however you need before doing a $.post .

See it working here: http://jsfiddle.net/ryleyb/6syqa60d/

Answer 2

Please find related example solution below:

HTML:

<form name="signupForm" class="cmxform" id="signupForm" method="get" action="">
<select name="category[]" id="cat_1">
<option value="">Select One</option>
<option value="1">aa</option>
<option value="2">bb</option>
<option value="3">cc</option>
<option value="4">dd</option>
</select>

<select name="category[]" id="cat_2">
<option value="">Select One</option>
<option value="5">ee</option>
<option value="6">ff</option>
<option value="7">gg</option>
<option value="8">hh</option>
</select>

<select name="category[]" id="cat_3">
<option value="">Select One</option>
<option value="9">ii</option>
<option value="10">jj</option>
<option value="11">kk</option>
<option value="12">ll</option>
</select>

<input class="submit" type="submit" value="Submit">
</form>

Now we will use jquery validation plugin jquery.validate.js for validating the form. The condition will be that user will have to choose category from each dropdown. The script for validation will be as below:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$().ready(function() {
// validate the comment form when it is submitted
$("#signupForm").validate({
rules: {
"category[]": "required"
},
messages: {
"category[]": "Please select category",
}
});
});
</script>

Now the problem is that the readymade jquery.validate.js only validates the first element of category[]. So, we need to modify it a little bit.

In jquery.validate.js, we can find a function named checkForm, we have to modify it as below:

checkForm: function() {
this.prepareForm();
for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
this.check( this.findByName( elements[i].name )[cnt] );
}
} else {
this.check( elements[i] );
}
}
return this.valid();
}

Answer 3

Try to use

$.validator.addClassRules("customer", { cRequired: true });

from documentation http://jqueryvalidation.org/reference