Question

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

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

我在这里做错了什么？

您的select元素都不包含name属性。 jQuery Validate插件强制要求验证的所有元素都包含唯一的name属性。这就是插件如何跟踪所有内容。没有解决方法。

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

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

jQuery Validator规则应用于错误的元素

1 个答案: