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

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

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

4

2 回答 2

3

你的代码：

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);
}

有关所有可用的回调函数和选项，请参阅文档。

附加参考

这些是默认的回调函数：

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

于 2013-09-03T14:44:57.047 回答
1

使用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");
        }
    });
于 2016-03-19T00:30:18.227 回答