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

根据您对其他答案的评论：

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

我不知道“中性”是什么意思，但默认情况下当所有错误都离开容器时，插件会使容器“隐藏”。换句话说，重要的是容器在包含错误时的样式，因为它只会在内部出现错误时被看到。否则，它只是隐藏。要实现此初始状态，请将样式设置为display: none;。您还可以设置其他属性以查看错误时间。（参考jsFiddle示例）。

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

我还删除了您的highlight和unhighlight回调函数，因为这些函数是逐场启动的，并且与错误容器无关。（你也通过用自己的功能覆盖它们来破坏它们的默认功能。）

DEMO：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 */ }

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

1 个答案: