Question

<div class="login-form">
                            <form action="page.jsp" id="form-id" method="post" novalidate="novalidate">
                                <div> <input type="text" name="Email" id="emaiphys" style="max-width: 320px;"><span id="label-span"></span></div>
                                <input class="btn" type="submit" value="RESET PASSWORD">
                                <a href="./login.jsp">Return to Login</a>
                            </form>
                        </div>

我正在使用jquery验证来验证电子邮件字段。以下是我的jquery验证码

(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#form-id").validate({
               
                errorClass:"errorClass",
                errorElement:"label",
                rules: {
                                Email: {
                                    required: true,
                                    email: true,
                                    remote:"./check-email.jsp"

                                }
                            },
                messages: {
                    Email: {
                        required: "Please enter a Email Address",
                        email: "Please enter a Valid Email Address",
                        remote: "Email not found"
                    }
                },
    highlight:function(element,errorClass){
        $(element).removeClass(errorClass);
    },
    errorPlacement: function(error, element) { 

                //alert(element.parent());
                error.appendTo( element.next()); 
        },
                submitHandler: function(form) {
                    form.submit();
                },
    success: function(label) { 
            // set   as text for IE 
            label.addClass('checked');
        } 
            });
        }
    }

    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

如果成功，则显示在css类中定义的“tick”图像。现在，如果用户再次输入错误的电子邮件，则检查类仍将存在并且导致“tick”图像再次可见错误也是如此。一旦输入正确的电子邮件，用户输入incorect emnail后如何删除该检查的类。

Answer 1

您可以创建另一个名为

的类

.checked.error {
    background-image: none !important;
}

仅当已将checked和error类应用于标签时，才会触发此类。因为我们正在制作background-image：none！important，它将覆盖已检查类的css规则。

- 更新 -

你可以尝试一件事;不要将选中的类添加到标签中，而是将其添加到父div并修改css规则以定位该div中的标签，例如：

success: function(label) { 
    label.closest('div').addClass('checked');
} 

errorPlacement: function(error, element) { 
        element.closest('div').removeClass('checked');
        error.appendTo( element.next()); 
},

和css：

.checked .error {
    background-image: none !important;
}

Answer 2

试试这个

errorPlacement: function(error, element) { 
            console.log(element); //check if your element is <label> if not use element.find('label')...
            element.removeClass('checked');
            error.appendTo( element.next()); 
    },

在jquery验证中重复成功类

2 个答案: