0

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

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

当出现验证错误时，我希望这个 div 的类是“errorBox”。当没有验证错误时，我希望 css 为“空白框”。

我有以下 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 被应用于输入字段。？！？我不能让它工作。

有任何想法吗？

4

1 回答 1

0

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

“我希望 css 在出现错误之前保持中立，然后在错误离开时重置为中立。”

我不知道“中性”是什么意思，但默认情况下，当所有错误离开容器时，插件会使容器“隐藏”。换句话说，重要的是容器包含错误时的样式，因为只有在其中有错误时才会看到它。否则，它只是隐藏起来。要实现此初始状态，请将样式设置为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 */
}
于 2013-03-20T04:28:36.207 回答