Question

我有一个使用JQuery Validate插件验证数据的表单。对于用户名字段（但不是我表单上的其他字段），如果用户名可用，我想在字段旁边显示“用户名可用”。

我有这个几乎工作。唯一有问题的是当用户在输入有效值后编辑用户名时，永远不会删除先前的有效消息，因此在该字段旁边显示“用户名可用用户名可用”，或“用户名可用用户名可用用户名可用“等等。

在重新验证此字段时，我需要进行哪些更改才能删除之前的“用户名可用”消息？

我的jquery成功函数如下：

$("form").validate({
        success: 
            function(label) {

                if (label.attr('for') == "username") {
                    var element = '#' + label.attr('for');
                    label.removeClass("error").addClass("valid").text("Username available");
                } else {
                    label.removeClass("error");
                }


        }
    });

    $("#regForm").validate();
});

Answer 1

我终于弄明白了。查看validate插件的源代码，如果从有效标签中删除“error”类，则在重新验证时不会重用标签，而是创建新标签。

所以我的解决方法是从成功函数中删除.removeClass（）并修改我的样式表的有效类来使用！important来覆盖错误类中不同的项目。

新的验证功能：

$("form").validate({
    success: 
        function(label) {

            if (label.attr('for') == "username") {
                var element = '#' + label.attr('for');
                label.addClass("valid").text("Username available");
            } else {
                label.addClass("invisiblevalid"); //ie. hide
            }


    }
});

$("#regForm").validate();

}）;

修改后的样式表代码：

label.error {
background: url('check.gif') no-repeat;
color: #FF0000;
}
label.valid {
background: url('check.gif') no-repeat !important; 
color: #339900 !important;
}
label.invisiblevalid {
display: none !important;
}

Answer 2

我找到了解决方案。

基本上，如果在添加类有效之后未更新CSS，则不会覆盖类规则。为什么？问题不在于javascript方面，而在于你的CSS。您的Valid类必须在您的Error类之后声明....

我花了2个小时在JS上寻找问题，但它是关于CSS .... argh ....

Answer 3

我不确定您使用的是哪个插件。但我想它看起来应该是这样的。

$("form").validate({
    success: 
        function(label) {

            if (label.attr('for') == "username") {
                var element = '#' + label.attr('for');
                label.removeClass("error").addClass("valid").text("Username available");
            } else {
                label.removeClass("error");
            }


    },
    error: 
        function(label) {

            if (label.attr('for') == "username") {
                var element = '#' + label.attr('for');
                label.addClass("error").removeClass("valid").text("Username unavailable");
            } else {
                label.addClass("error");
            }


    }
});

$("#regForm").validate();

Answer 4

实际上我认为你不想等到表单重新验证你应该为字段本身设置一个函数，所以当用户更改文本时你删除用户名可用消息，但如果你经常验证你不必担心。

您的JavaScript看起来很好但是您需要确保使用带有标签的jQuery文本正确设置HTML，这些标签看起来不像以下情况会导致问题。

<label id="myLabel"></label>

jQuery页面here的评论中有一个简短的注释。

Jquery验证成功函数在重新验证时没有清除有效标签？

4 个答案: