Question

我已经将jQuery UI组合框与远程源添加到我的表单中。现在，我试图用jQuery Validation Plugin验证它（只允许列表中的值，字段是必需的。）

我尝试过标准方法：

 $("#myform").validate({
    focusInvalid: false,
    focusCleanup: true,
    rules: {
      cbCountry: { // combobox
        required: true
      }

但仍允许空值。我做错了什么？

更新：我试图按照下面的@ Mike_Laird的建议，我发现我的自定义方法

$.validator.addMethod('validComboboxValue', function (value) {
},
...

甚至在应用于jQuery UI组合框时也没有调用。但是当我为标准文本输入分配相同的方法时，它被调用。

Answer 1

当您使用jqueryui autocomplete组合框时，

validate.js需要标记上的“name”。生成的代码不具有id和name属性，因此需要根据需要添加它们。

在组合框的_create功能中，您需要添加：

select = this.element.hide(),
select_id = select.attr('id'),
selected = select.children(":selected"),

和

input = $("<input>")
.attr('id', select_id + '_combobox')
.attr('name', select_id + '_combobox')
.appendTo(wrapper)

这样，给出这样的HTML：

<select id="dropDownlist">
  <option...
</select>

autocomplete-combobox会生成所需的input元素，id和name属性设置为dropDownlist_combobox

有了这个我可以完全控制来自jqueryui-autocomplete-combobox的这个自动生成的htmls标签然后，您可以将验证规则应用于input元素（dropDownlist-combobox）这看起来像是：

$('#dropDownlist_combobox').rules('add', {
    required: true,
    messages: {
        required: 'Please enter your combobox'
    }
});

并且瞧瞧：）

但是，使用此选项会导致input标记和“下拉列表”按钮之间显示错误消息。要解决此问题，您需要一些额外的代码：

$.validator.setDefaults({
    errorPlacement: function (error, element) {
        if (element.context.id.indexOf('_combobox') == -1)
            error.insertAfter(element);
        else
            error.appendTo(element.parent());
    }
});

该示例的所有代码均可在http://jsfiddle.net/XhU78/

处获得

我希望能为你效劳：）

Answer 2

基本思想是在每个选择选项上设置值，然后编写自定义验证器方法以检查选项值。类似于以下自定义方法的内容只会根据所需的选择下拉列表进行一些选择。

jQuery.validator.addMethod(
"selectComboboxCheck",
function (value, element)
    {
    if (element.value === "0") {return false;}
    else return true;
    }
"Required - select an option."
);

在select标记中放置class =“selectComboboxCheck”以触发此方法。选择选项应该类似于

<option value = "1">1</option>

Answer 3

我在这里看到两个问题。首先 - 你必须使用元素的名称，而不是标识符。第二：如果我理解正确 - 你认为你允许空<select>值，但它不是那样的。在自动完成后正确填充了选择，但是当您在<input id="acId">中传递空值（eq删除内容并按ESC）时，更改不会传播到<select>，该<input id="acId">包含在//changes made //HTML: <select id="cbCity" name="cbCityName" style="display:none"> //JS: var input = this.input = $('<input id="acId" name="acName">') ... $("#fAddTeacher").validate({ debug : true, // for debugging rules: { cbCityName: { required: true }, acName : { required : true } } });之前分配的内容清零。

长话短说 - 您应该选择不选择，而是自动创建输入，或以某种方式传播空值以进行选择。

使用你的小提琴我测试了第一种方法：http://jsfiddle.net/RRH6t/1/

{{1}}

Answer 4

只需添加一个像这样的新自定义方法

jQuery.validator.addMethod("selectComboboxCheck",
        function (value, element)
            {
                if ($(element).find(":selected").val() == -1) {
                    return false; 
                }
                else return true;
            },
            "Required"
        );

并添加如下所示的选择框：

<select id="dropDownlist" class="selectComboboxCheck">
  <option value="-1">Select something</option>
  <option value="1">Car</option>
  <option value="2">Plane</option>
</select>

现在当你选择“选择某些东西”时，验证将不会通过，否则它将会通过。（用jquery 1.9.1测试）

Answer 5

我知道这是一个古老的话题，但我必须做大致相同的事情（尽管使用静态源码）。检查选择值的唯一问题是验证插件过滤掉隐藏的元素，并且Combobox代码方便地隐藏了原始选择。然而，没有什么能阻止我们告诉Validator考虑所有元素，甚至是隐藏的元素：

$("#form").validate({
    ignore: ""
});

Ignore是一个筛选出不需要的元素的选择器，默认情况下等于:hidden。您也可以在调用$.validator.setDefaults()时提供它，并让它适用于任何验证器实例。这在提交带有required和min属性的表单时有效，或许还需要更多的努力来完成选择（例如触发focusout事件）。

<强>更新

要让它在价值变化上进行验证而不仅仅在表单提交上进行验证有点棘手，但归结为以下几点：

实际上只需要required属性，而不是min属性。
需要将Combobox代码更改为接受具有空值的选项。因为它只是JQueryUI的一个例子，所以这应该不是问题。
让select中的第一个选项为空值。
让Combobox在状态更改时触发focusout事件（autocompleteselect，_removeIfInvalid）。

如何使用jQuery Validation Plugin验证jQuery UI组合框值？

5 个答案: