jQuery Validator規則適用於錯誤元素

在試圖將所需規則應用於下拉列表失敗（是的，我確實有一個空值選項）後，我創建了一個自定義規則以應用於我的下拉菜單。正如我通過添加警報發現的，jQuery Validator並沒有看到我引用的<select>標記，selectFruitResult。相反，它正在看它上面的那個：selectTypeResult。我假設簡單地使用內置的所需規則也正在查看錯誤的元素。爲什麼？我在這裏做錯了什麼？jQuery Validator規則適用於錯誤元素

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（請注意，驗證是在另一個文件中初始化和form.validate()叫）：

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

     } 
    }); 
});

來源

2016-07-22 L Becker

我在做什麼錯在這裏？

您的select元素都不包含name屬性。 jQuery Validate插件要求所有考慮驗證的元素都包含一個唯一的name屬性。這就是插件如何跟蹤一切。沒有解決方法。

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

現在只要第一option包含value=''，你將不再需要使用自定義規則，並如期內置required將起作用。

來源

2016-07-22 14:24:48 Sparky

jQuery Validator規則適用於錯誤元素

回答

相關問題