bedingte Auswahl mit jQuery und dem Validierungs-Plugin

Question

Ich habe ein Formular, das ich mit dem jQuery-Validierungs-Plugin validiere. Ich möchte ein bedingtes Auswahlfeld hinzufügen (ein Auswahlfeld, das je nach Auswahl eines anderen ausgefüllt/angezeigt wird) und es ebenfalls validieren lassen. Hier ist, was ich bisher:

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

}); 

Und die 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> 

Bisher ist die select arbeitet für mich, aber die Validierung der Meinung, dass das Feld leer ist, selbst wenn ein Wert ausgewählt .

Es scheint, als gäbe es eine Menge Möglichkeiten, bedingte Auswahl in jQuery zu tun. Dies war der beste Weg, wie ich es geschafft habe (ich bin neu bei jQuery), aber ich würde gerne hören, was Sie für den besten Weg halten, besonders wenn es gut mit dem Validierungs-Plugin funktioniert. Vielen Dank!

Answer 1

Zwei Änderungen erforderlich:

1) Sowohl die Kinderauswahlbox des gleichen Namen Attribut zugeordnet sind, weist ein anderen Attribute für jedes Auswahlfeld (das verwendet wird, Validierungsregeln) zuzuordnen:

<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) Fügen Sie für jede der Kind Auswahlboxen in der Validate-Methode Optionen wie folgt ein erforderliches Abhängigkeitsregel:

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