1 
<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”图像再次可见，以防出现错误。那么，一旦输入了正确的电子邮件，当用户输入不正确的 emnail 时，如何删除已检查的类。

4

2 回答 2

0

您可以创建另一个名为

.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;
}
于 2013-01-31T06:07:43.043 回答
0

尝试这个

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()); 
    },
于 2013-01-31T06:09:14.020 回答