使用自定义div和css进行jQuery验证

我有一个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>

$（函数（）{
$（“#loginForm”）.validate（{
规则：{
用户名：“必需”，
密码：“必需”
},
信息：{
用户名：“请输入用户名”，
密码：“请输入密码”，
},
errorLabelContainer:“#loginMessage”，
包装纸：“李”，
亮点：功能（元素）{
$（element.addClass（'errorBox'）；
}, 
取消高亮显示：功能（元素）{
$（element.removeClass（'errorBox'）；
},
});
});

不幸的是，错误框css正在应用于输入字段？！？我不能让它工作

---

有什么想法吗

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

“我希望css保持中立，直到出现错误，然后重置 当错误离开时，切换到空档。”

我不知道“中立”是什么意思，但默认情况下，当所有错误离开容器时，插件会使容器“隐藏”。换句话说，当容器包含错误时，最重要的是它的样式，因为只有当容器中有错误时才会看到它。否则，它就是隐藏的。要达到此初始状态，请将样式设置为

display:none。您还可以设置其他属性，以便在出现错误时查看。（请参阅JSFIDLE示例）

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

我还删除了您的
高亮显示
和
取消高亮显示
回调函数，因为这些回调函数是按字段逐个启动的，并且与错误容器无关。（您还使用自己的功能超越了它们，从而打破了它们的默认功能。）

演示：

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>

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