jQuery UI Select 结合验证插件答案

【问题标题】：jQuery UI Select in combination with the Validation PluginjQuery UI Select 结合验证插件
【发布时间】：2012-04-19 01:11:45
【问题描述】：

我想验证我的选择框，但因为我使用 jQuery UI 来设置我的选择框的样式，所以它不起作用。

Jquery UI 设置为显示的真正选择框：无，所以这就是它不起作用的原因，请参阅：

但是我怎样才能让它与 jQuery UI 选择框插件一起工作呢？

我希望有人有一个可行的解决方案。 :)

【问题讨论】：

你能提供一个SSCCE吗？该插件的附加方法隐藏了原来的选择框并用自定义选择框替换它（通过使用显示：无）。您必须改用plugin 提供的选择器。
嗨，Izdt，我不是真正的 JS 程序员，所以我不太明白你在说什么。我希望你可以帮助我？我用我现在拥有的代码制作了一个 JSFiddle：jsfiddle.net/jB5mE

标签： jquery jquery-ui select jquery-validate drop-down-menu

【解决方案1】：

change: function() {
   $("#validate-form-name").validate().element(this);
};

这很好用。

【讨论】：

欢迎来到 Stack Overflow！请不要把你的源代码扔在这里。友善一点，并尝试对您的答案进行漂亮的描述，以便其他人会喜欢并支持它。见：How do I write a good answer?

【解决方案2】：

这仅仅是因为selectMenu 隐藏了select。默认情况下，验证不验证隐藏元素。您可以通过将ignore 选项设置为[] 来更改此设置：

$(".valid").validate({
    meta: "validate",
    ignore: [],
    groups: {
        checks: checkbox_names
    },
    errorPlacement: function(error, element) {
        if (element.attr("type") == "checkbox")
            error.insertAfter(element.parent().siblings().last());
        else if (element.is("select")) {
            error.insertAfter(element.next("a.ui-selectmenu"))
        }
        else error.insertAfter(element);
    }
});

如您所见，更改 selectMenu 不会重新验证输入。您可以通过点击selectMenu 上的change 事件并手动重新验证元素来解决此问题：

// SELECTBOXES
$(function() {
    $('.dataTables_length input, select').not("select.multiple").selectmenu({
        style: 'dropdown',
        transferClasses: true,
        width: null,
        change: function() {
            $(".valid").validate().element(this);
        }
    });
});

示例： http://jsfiddle.net/8YvSN/

【讨论】：

你就是那个男人，谢谢！但是当用户选择一个选项时，错误消息不会消失，有没有办法可以做到？
感谢 Andrew 抽出宝贵时间。
谢谢安德鲁。对我也有很大的帮助。如果像我这样的人懒得查看 jsfiddle 示例，$(".valid").validate().element(this); 中的 .valid 选择器；指的是表单元素：