css - jQuery 验证使用自定义 div 和 css

Question

我有一个 div，我希望登录错误消息进入:

<div id="loginMessage" class="blankBox">&nbsp;</div>

当存在验证错误时，我希望此 div 的类为“errorBox”。当没有验证错误时，我希望 css 为“blankBox”。

我有以下 jQuery 验证:

<script>
    $(function() {
       $("#loginForm").validate({   
            rules: {
                username: "required",
                password: "required"
            },
            messages: {
                username: "Please enter a username",
                password: "Please enter a password",
            },
            errorLabelContainer: "#loginMessage",
            wrapper: "li",
                            highlight: function(element) {
                                $(element).addClass('errorBox');
                            }, 
                            unhighlight: function(element) {
                                $(element).removeClass('errorBox');
                            },
        });
    });
    </script>

不幸的是，errorBox CSS 被应用于输入字段。 ？!？我无法让它工作。

有什么想法吗？

Answer 1

根据您对另一个答案的评论:

"I want the css to be neutral until errors appear in it, and then reset to neutral when errors leave it."

我不知道“中立”是什么意思，但是默认当所有错误都离开容器时，插件会使容器“隐藏”。换句话说，重要的是容器包含错误时的样式，因为只有在其中有错误时才会看到它。否则，它只是隐藏起来。要实现此初始状态，请将样式设置为 display: none;。您还可以设置其他属性，以便在出现错误时使用。 (引用 jsFiddle 示例)。

尽管有其他答案，errorPlacement 在这种情况下并不好。它仅用于放置单独的消息。它与错误容器中的消息无关。

我还删除了您的 highlight 和 unhighlight 回调函数，因为它们是逐个字段触发的，并且与您的错误容器无关. (您还通过用自己的函数覆盖它们来破坏了它们的默认功能。)

演示:http://jsfiddle.net/6dCB7/

jQuery:

$(document).ready(function () {

    $('#loginForm').validate({ // initialize the plugin
        errorLabelContainer: "#loginMessage",
        wrapper: "li",
        rules: {
            // your rules
        }
    });

});

HTML:

<div id="loginMessage"></div>
<form id="loginForm">
    ....
</form>

CSS:

#loginMessage {
    display: none;
    /* also set the properties for when it displays with errors */
}