jQuery Validator-Regel für falsches Element

Question

Nachdem ich erfolglos versucht habe, eine erforderliche Regel auf ein Dropdown anzuwenden (ja, ich hatte eine Option mit einem leeren Wert), habe ich eine benutzerdefinierte Regel für mein Dropdown erstellt. Wie ich entdeckt habe, indem ich eine Warnung hinzufügte, schaut jQuery Validator nicht auf das <select> Tag, das ich referenziere, selectFruitResult. Stattdessen schaut es sich das über ihm an: selectTypeResult. Ich gehe davon aus, dass man mit der eingebauten Regel auch das falsche Element betrachtet. Warum? Was mache ich hier falsch?

HTML:

<form id="fruitResultForm"> 
     <div class="form-group"> 
       <label for="selectTypeResult">Select a fruit by Type:</label> 
       <select class="form-control" id="selectTypeResult" style="width: 300px;"> 
       <option>APPLES</option> 
       <option>ORANGES</option> 
       <option>CHERRIES</option> 
       <option>GRAPES</option> 
       </select> 
      </div> 
      <div class="form-group" id="selectFruitDiv"> 
       <select class="form-control" id="selectFruitResult" style="width: 300px;"></select> 
      </div> 
      </div> 
</form> 

JavaScript (beachten Sie, dass der Validator initialisiert und form.validate() wird in einer anderen Datei genannt):

$(document).ready(function() { 

$("#selectTypeResult").on("change", function(e){ 
    var optionSelected = $('#selectTypeResult').find('option:selected'); 
    var groupType = optionSelected.val(); 
    $.ajax({ 
     url: "/getfruit.json, 
     type: "GET", 
     success: function (data) { 
      // Clear options in selectFruit dropdown. 
      $("#selectFruitResult").empty(); 

      // Populate new options in selectFruit dropdown. 
      if (data.fruit.length > 0) { 
       for (var i = 0; i < data.fruit.length; i++) { 
        $("#selectFruitResult").append("<option value='" + data.fruit[i].categoryId + "'>" + data.fruit[i].name + "</option>"); 
       } 
      } else { 
       $("#selectFruitResult").append('<option value="None">No existing fruits of this type</option>'); 
       jQuery.validator.addMethod("emptyFruit", function(value, element) { 
        alert(value); 
        return value != "None"; 
       }, 'Please select an existing fruit'); 
       $("#selectFruitResult").rules('add', 'emptyFruit'); 
      } 

     } 
    }); 
}); 

Answer 1

Was mache ich hier falsch?

Keines Ihrer select Elemente enthält ein name Attribut. Das jQuery Validate-Plugin schreibt vor, dass alle für die Validierung in Betracht gezogenen Elemente ein eindeutiges name-Attribut enthalten. Es ist nur, wie das Plugin alles verfolgt. Es gibt keine Problemumgehung dafür.

<select class="form-control" name="selectFruitResult" id="selectFruitResult" style="width: 300px;"> 

Nun, solange die erste option enthält value='', werden Sie nicht eine benutzerdefinierte Regel, und die eingebaute in required wie erwartet verwenden müssen funktionieren.