使用 jQuery 和验证插件进行条件选择

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)两个子选择框都分配了相同的name属性，分配不同的 每个选择框的属性（这将用于分配验证规则）：

   <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) 在验证方法选项中为每个子选择框添加所需的依赖规则，如下所示：

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