Question

errorPlacement: function(error, element) {
            if(element.hasClass('chosen-select')){
                error.insertAfter(element.next());
                element.next().addClass('error');
            }
}

如果使用上面的代码在select元素中没有选择任何值，我可以轻松地将类错误添加到我想要的元素。但问题是当元素的值有效时（在这种情况下，当选择任何选项时）如何删除我在errorPlacement事件中添加的类？

当元素值有效时是否会触发任何事件？

Answer 1

您的代码：

errorPlacement: function(error, element) {
    if(element.hasClass('chosen-select')){
        error.insertAfter(element.next());
        element.next().addClass('error');
    }
}

errorPlacement回调函数只会触发一次以放置初始错误标签。它将无法正常运行，因为插件会自动切换它们。

对有效元素触发success回调。但是，这用于切换错误标签。例如，当您要在有效元素旁边放置消息或类似绿色复选标记的对象时。你提到切换类，所以看起来你可能不想要success。

我无法确定哪些会为您效果，因为您没有提供简洁的工作演示。但是，如果要切换类，看起来应该使用highlight和unhighlight回调函数。请注意，通过使用您自己的自定义highlight/unhighlight函数，它们将替换插件的默认值。

errorPlacement: function(error, element) {
    if(element.hasClass('chosen-select')){
        error.insertAfter(element.next());
    }
},
highlight: function(element, errorClass, validClass) {
    $(element).next().addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
    $(element).next().removeClass('error');
}

由于默认错误类为error，因此您只需使用errorClass参数。

errorPlacement: function(error, element) {
    if(element.hasClass('chosen-select')){
        error.insertAfter(element.next());
    }
},
highlight: function(element, errorClass, validClass) {
    $(element).next().addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
    $(element).next().removeClass(errorClass);
}

See the docs for all available callback functions and options

其他参考

这些是默认的回调函数：

highlight: function( element, errorClass, validClass ) {
    if ( $(element).attr("type") === "radio" ) {
        this.findByName($(element).attr("name")).addClass(errorClass).removeClass(validClass);
    } else {
        $(element).addClass(errorClass).removeClass(validClass);
    }
},
unhighlight: function( element, errorClass, validClass ) {
    if ( $(element).attr("type") === "radio" ) {
        this.findByName($(element).attr("name")).removeClass(errorClass).addClass(validClass);
    } else {
        $(element).removeClass(errorClass).addClass(validClass);
    }
}

来源：http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js

Answer 2

使用success回调函数，可以获得对可能无法验证的实际表单元素的引用。下面的示例在验证失败时向每个表单字段的父div添加一个类，然后在字段通过后删除错误类：

form.validate({
        rules: {
            Name: {
                required: true
            },
            Email: {
                required: true
                , regex: "^[0-9a-zA-Z.+_\-]+@{1}[0-9a-zA-Z.+_\-]+\\.+[a-zA-Z]{2,4}$"
            }
        },
        messages: {
            Name: {
                required: "Please give us your name"
            },
            Email: {
                regex: "Please enter a valid email address"
            }
        },

        errorPlacement: function(error, element) {
            element.parent().addClass("error");
        },

        success: function(element) {
            $("#" + element.attr("for")).parent().removeClass("error");
        }
    });

jQuery Validate插件：元素值有效时的回调

2 个答案: