Question

我正在使用jQuery Validation插件，它会自动验证用户输入内容的时刻＆amp;我希望保留此功能，但在第一次尝试用户填写字段时请避免使用此功能。

我在信用卡号码字段上使用它，所以即使用户没有完成输入整张卡片，文字字段也会变成红色，这很烦人。

我尝试了什么：

我添加了一个阻止错误类格式化的类，并且在至少发生一次焦点事件时删除了该类。

    // This is the focus event that removes the 'no-error-first-attempt' class
    $('.js-ccvalidate input').focusout(function () {
        if($(this).parent().hasClass('no-error-first-attempt')){
            $(this).parent().removeClass('no-error-first-attempt');
        }
    });

然而，如果用户直接按下提交按钮，则此解决方案有效，则焦点事件尚未执行，因此错误视觉提示不会显示...我可以创建功能并将其绑定到提交按钮但这一切看起来都非常错误......有没有更好的解决这个问题的方法呢？

修改

这个问题与＆＃34; How to perform validation on submit only - jQuery Validation plugin＆＃34;不一样。因为我想保持＆＃34; onfocusout＆＃34;，＆＃34; onkeyup＆＃34; ＆安培; ＆＃34;的onclick＆＃34;值为true但不是用户的第一次尝试。

Answer 1

事实证明我正在寻找的功能已经存在于插件中但是我使用的主题是定义了这个：

<form id="signinform" runat="server" defaultfocus="username" defaultbutton="LogInBtn">

    <asp:scriptmanager id="FormScriptManager" runat="server"></asp:scriptmanager>

    <div class="form-signup">

        <div class="form-group form-group-info">
            <div class="append-icon m-b-30">
                <asp:textbox id="username" runat="server" cssclass="form-control c-white form-control-success" placeholder="Username" />
                <i class="mdi-action-perm-identity c-light"></i>
                <asp:requiredfieldvalidator runat="server" id="UserNameValidator" controltovalidate="username" display="Dynamic" validationgroup="LoginVAL" setfocusonerror="true" cssclass=" f-11 c-red m-b-0" errormessage="The username is required." />
            </div>
        </div>

        <div class="form-group form-group-info">
            <div class="append-icon m-b-30">
                <asp:textbox id="Password" textmode="Password" runat="server" cssclass="form-control c-white form-control-success" placeholder="Password" />
                <i class=" mdi-action-lock-outline c-light"></i>
                <asp:requiredfieldvalidator runat="server" id="PasswordValidator" controltovalidate="Password" display="Dynamic" setfocusonerror="true" validationgroup="LoginVAL" cssclass="f-11 c-red m-b-0" errormessage="The password is required." />
            </div>
        </div>

        <div class="togglebutton togglebutton-info">
            <label class="c-light normal f-11 m-b-15">
                <input type="checkbox" runat="server" name="RememberMe" id="RememberMe" class="md-checkbox">
                Remember me?
            </label>
        </div>
    </div>

    <asp:placeholder runat="server" id="ErrorMessage" visible="false" viewstatemode="Disabled">
        <p id="ErrorMessageContainer" runat="server" class="badge badge-danger m-b-5 f-11">
            <asp:Literal runat="server" ID="FailureText" ViewStateMode="Disabled" />
        </p>
    </asp:placeholder>

    <div class="progress-demo">
        <asp:linkbutton id="LogInBtn" runat="server" onclick="LogIn" text="Login" cssclass="btn btn-material-indigo btn-block btn-embossed ladda-button" validationgroup="LoginVAL" data-style="zoom-in"></asp:linkbutton>
    </div>

    <p>
        <%--   Enable this once you have account confirmation enabled for password reset functionality--%>
        <asp:hyperlink runat="server" id="ForgotPasswordHyperLink" viewstatemode="Disabled">Forgot your password?</asp:hyperlink>
    </p>


    <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div id="LoginModalHeader" runat="server" class="modal-header bg-aero">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icons-office-52"></i></button>
                    <h4 class="modal-title c-white">
                        <asp:label id="LoginModalTitle" runat="server" />
                    </h4>
                </div>

                <asp:updatepanel id="LoginModalUpdatePanel" runat="server">
                    <ContentTemplate>

                        <div class="modal-body m-t-10">
                            <p class=" c-gray w-300 f-13"><asp:Label ID="LoginModalDetails" runat="server" /></p>
                        </div>
                        <div class="modal-footer">
                            <asp:LinkButton runat="server" ID="ResendConfirm" OnClick="SendEmailConfirmationToken" Text="Resend Confirmation" Visible="false" CssClass="btn btn-material-blue-grey btn-embossed" />
                            <button id="LoginModalCancel" runat="server" type="button" class="btn btn-default btn-embossed" data-dismiss="modal">Cancel</button>
                        </div>

                    </ContentTemplate>
                    </asp:updatepanel>

            </div>
        </div>
    </div>

</form>

我只是将其更改为：

        onkeyup: function (element, event) {
            var parent = $(element).closest('.form-group');
            if(event.keyCode == 9){
                return false;
            }
            if ($(element).valid()) {
                parent.removeClass('has-error');
                parent.next('.error').remove();
            }
        },

现在首次尝试时未验证文本字段：）

jQuery验证：避免在首次尝试时进行验证

1 个答案: