jquery - jQuery 验证，特定的 errorClass 放置

Question

我只是想知道如何专门将 errorClass 添加到元素中。我正在使用 bootstrap-select 来设计我的选择。这隐藏了 select 元素并创建了一个 div，jQuery validate 将 errorClass 添加到 select 元素而不是 div （有意义）。

我怎么能具体说所有的选择，errorClass 应该在 div 上？我猜测突出显示，但我似乎无法找到如何仅在一个元素上执行此操作。

Answer 1

要更改error和valid类的应用位置，您必须指定自定义highlight和unhighlight回调函数。

这些是使用的默认功能。根据需要进行编辑。

$(document).ready(function () {

    $('#myform').validate({
        // other rules & options,
        highlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).addClass(errorClass).removeClass(validClass);
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).removeClass(errorClass).addClass(validClass);
            }
        }
    });

});

jsFiddle 演示：http: //jsfiddle.net/U3L73/

我将颜色应用于默认 CSS 类只是为了说明。

Answer 2

可以使用 showErrors 函数。我确实使用它（引导程序 3）将has-error类设置为表单组项，因此它突出显示表单组中的所有元素，而不仅仅是输入。

$.validator.setDefaults({
showErrors: function (errorMap, errorList) {
    $.each(this.successList, function (index, value) {
        var $element = $(value);
        $element.closest('.form-group').removeClass('has-error');
    });


    $.each(errorList, function (index, error) {
        var $element = $(error.element);
        $element.closest('.form-group').addClass('has-error');
    });
});