与验证插件结合使用的jQuery UI选择

Question

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

Jquery UI在display上设置了真正的选择框: none，所以这就是它不能工作的原因，请参阅：

​

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

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

Answer 1

这是因为selectMenu隐藏了select。默认情况下，validate不验证隐藏元素。您可以通过将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/

Answer 2

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

这可以很好地工作。