I have a form with 5 dropdowns that are generated by php at run time that I want to have validated using jQuery validator. Due to the fact that I have given them an array for the name, validator will only validate the first dropdown, but I need to ensure all 5 are being validated before posting my form.
PHP for making the dropdown
function activityDropDown($id){
echo('<select id='.$id.' name=activity[]>
<option></option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>');
}
<script type="text/javascript">
$(document).ready(function(){
$("#friDate").Zebra_DatePicker({
format: 'm-d-Y',
disabled_dates: ['* * * 0-4,6'],
first_day_of_week: 0,
onSelect: function(){
var date = new Date($("#friDate").val());
$("#mon").val(addDays(date, -4));
$("#tue").val(addDays(date, -3));
$("#wed").val(addDays(date, -2));
$("#thu").val(addDays(date, -1));
$("#fri").val(addDays(date, 0));
}
});
$("#form").validate();
$("#monActivity").rules("add", {
required: true
});
$("#tueActivity").rules("add", {
required: true
});
});
</script>
<tr>
<td>Activity:</td>
<td><?php activityDropDown('monActivity') ?></td>
<td><?php activityDropDown('tueActivity') ?></td>
<td><?php activityDropDown('wedActivity') ?></td>
<td><?php activityDropDown('thuActivity') ?></td>
<td><?php activityDropDown('friActivity') ?></td>
</tr>
As you can see, I have tried to manually add the rules based off the elements ID, but it is still doing the same thing; only the first dropdown will validate.
Any help would be greatly appreciated!
Try this:
This works around the limitation in the validation plugin by specifying the array indexes explicitly, so the names are distinct.