jQuery和Validation插件進行條件選擇

Question

我有一個正在使用jQuery驗證插件進行驗證的表單。 我想添加一個條件選擇框（根據另一個選擇填充/顯示一個選擇框），並使其生效。 這是我到目前為止的內容：

$(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();
      }
      });

});

和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>

到目前為止，選擇對我有用，但是驗證認為即使選擇了值，該字段也為空。

看起來有很多方法可以在jQuery中進行條件選擇。 這是我設法解決的最佳方法（我是jQuery的新手），但是我很想聽聽大家是否認為這是“最佳”方法，尤其是當它與驗證插件一起很好地工作時。 謝謝！

Answer 1

需要進行兩項更改：

1）子選擇框都被分配了相同的名稱屬性，為每個選擇框分配了不同的屬性（這將用於分配驗證規則）：

   <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）為validate方法選項中的每個子選擇框添加必需的依賴項規則，如下所示：

    $(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());
    });
});