jquery - jQuery UI Select 结合验证插件

Question

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

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

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

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

Answer 1

这只是因为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不会重新验证输入。您可以通过点击change事件selectMenu并手动重新验证元素来解决此问题：

// 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/

Answer 2

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

这工作正常。