conditional selects with jQuery and the Validation plugin

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>
开发者_StackOverflow
  <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!

Two changes needed:

1)Both the child select boxes are assigned the same name attribute, assign a different attribute for each select box (this will be used to assign validation rules):

   <div id="Associates" class="courses">
  <select name="lead_source_id_1" 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_2" id="Select1" 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>
<input type="hidden" name="lead_source_id" id="lead_source_id" value="" />

2) Add a required dependency rule for each of the child select boxes in the validate method options as below:

    $(document).ready(function(){
        $("#customer_information").validate({
                rules:{
                    lead_source_id_1: {
                        required: function(element){
                            var retVal = ($("#course_select").val() == "Associates");
                            return retVal;
                        }
                    },
                    lead_source_id_2: {
                        required: function(element){
                            var retVal = ($("#course_select").val() == "Certificates");
                            return retVal;
                        }
                    }
                },
        //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();
                        //return false;
                } 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();
    }
});

$(".courses select").change(function () {
                $("#lead_source_id").val($(this).val());
    });
});