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 クラスで定義された「目盛り」イメージが表示されます。ユーザーが再度間違った電子メールを入力すると、チェックされたクラスがまだ存在し、エラーが発生した場合にも「目盛り」イメージが再び表示されます。では、正しい電子メールが入力された後、ユーザーが不正な電子メールを入力するたびに、チェックされたクラスを削除するにはどうすればよいでしょうか。

4

2 に答える 2

0

という別のクラスを作成できます

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

このクラスは、checked クラスと error クラスの両方がラベルに適用された場合にのみトリガーされます。background-image: none !important を作成しているため、checked クラスの css ルールをオーバーライドします。

- アップデート -

1 つのことを試すことができます。チェックされたクラスをラベルに追加せず、代わりに親 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 に答える