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 DEMO：http://jsfiddle.net/U3L73/

我将颜色应用于默认的CSS类仅用于说明。

Answer 2

可以使用showErrors函数。我使用它（bootstrap 3）将 has-error 类设置为 form-group 项，因此它突出显示form-group中的所有元素而不仅仅是输入。

$.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');
    });
});

jQuery验证，特定的errorClass放置

2 个答案: