conditional selects with jQuery and the Validation plugin
- by dbonomo
Hi,
I've got a form that I am validating with the jQuery validation plugin. I would like to add a conditional select box (a selection box that is populated/shown depending on the selection of another) and have it validate as well. Here is what I have so far:
$(document).ready(function(){
$("#customer_information").validate({
//disable the submit button after it is clicked to prevent multiple submissions
submitHandler: function(form){
if(!this.wasSent){
this.wasSent = true;
$(':submit', form).val('Please wait...')
.attr('disabled', 'disabled')
.addClass('disabled');
form.submit();
} else {
return false;
}
},
//Customizes error placement
errorPlacement: function(error, element) {
error.insertAfter(element)
error.wrap("<div class=\"form_error\">")
}
});
$(".courses").hide();
$("#course_select").change(function() {
switch($(this).val()){
case "Certificates":
$(".courses").hide().parent().find("#Certificates").show();
$(".filler").hide();
break;
case "Associates":
$(".courses").hide().parent().find("#Associates").show();
$(".filler").hide();
break;
case "":
$(".filler").show();
$(".courses").hide();
}
});
});
And the HTML:
<select id="course_select">
<option value="">Please Select</option>
<option value="Certificates">Certificates</option>
<option value="Associates">Associates</option>
</select>
<div id="Form0" class="filler"><select name="filler_select"><option value="">Please Select Course Type</option></select></div>
<div id="Associates" class="courses">
<select name="lead_source_id" id="Requested Program" class="required">
<option value="">Please Select</option>
<option value="01">Health Information Technology</option>
<option value="02">Human Resources </option>
<option value="03">Marketing </option>
</select>
</div>
<div id="Certificates" class="courses">
<select name="lead_source_id" id="Requested Program" class="required">
<option value="">Please Select</option>
<option value="04">Accounting Services</option>
<option value="05">Bookkeeping</option>
<option value="06">Child Day Care</option>
</select>
</div>
So far, the select is working for me, but validation thinks that the field is empty even when a value is selected.
It looks like there are a ton of ways to do conditional selects in jQuery. This was the best way I managed to work out (I'm new to jQuery), but I'd love to hear what you folks feel is the "best" way, especially if it works well with the validation plugin. Thanks!
