jQuery 验证器规则应用于错误的元素

Question

在尝试将所需规则应用于下拉列表失败后（是的，我确实有一个空值选项），我创建了一个自定义规则来应用于我的下拉列表。正如我通过添加警报发现的那样，jQuery 验证器没有查看我正在引用的 <select> 标记，selectFruitResult。相反，它正在查看上面的那个：selectTypeResult。我假设仅仅使用内置的 required 规则也是在寻找错误的元素。为什么？我在这里做错了什么？

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

        }
    });
});

Answer 1

What am I doing wrong here?

您的 select 元素都不包含 name 属性。 jQuery 验证插件要求所有考虑验证的元素都包含一个唯一的 name 属性。这就是插件跟踪所有内容的方式。对此没有解决方法。

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

现在只要第一个 option 包含 value=''，您就不需要使用自定义规则，内置的 required 将按预期运行。

jQuery 验证器规则应用于错误的元素

jQuery Validator rule applying to wrong element

html

jquery

jquery-validate