jQuery 验证后如何禁用/启用提交按钮？

How can I disable/enable submit button after jQuery Validation?

提问by Artemination

I want to disable the submit button of the form after the "on_click" event, this jscript does it succesfully, but when a incorrect email is validated with jquery and then pressed the submit button, after I make the correction of the email, the button still is disabled. How can i solve this!?

我想在“on_click”事件之后禁用表单的提交按钮，这个 jscript 成功地完成了，但是当使用 jquery 验证不正确的电子邮件然后按下提交按钮时，在我更正电子邮件后，按钮仍然被禁用。我该如何解决这个问题！？

Jscript:

脚本：

<script src="js/libs/modernizr-2.6.2.min.js"></script>
<script src="lib/jquery-1.11.1.js"></script>    
<script src="lib/jquery.js"></script>
<script src="dist/jquery.validate.js"></script> 
<script>
$.validator.setDefaults({
    submitHandler: function() {
        signupForm.submit();
    }
});

$().ready(function() {
    //Desactiva el submit
    $(".submit").click(function () {
       $(".submit").attr("disabled", true);
       $('#signupForm').submit();
     });

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        wrapper: "div",
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            email: "Use una cuenta de correo v&aacute;lida",
            password: {
                required: "Ingrese su contrase?a",
                minlength: "La contrase&ntilde;a al menos debe tener 5 caracteres"
            }
        }
    });


});
</script>

Form

形式

    <form class="cmxform" id="signupForm" method="get" action="an-olvido-contrasena.asp">
    <input type="hidden" value="1" name="inicializar">
                    <p>
                    <div >
                    Correo electr&oacute;nico<br>
                    <input id="email" name="email" type="email" required placeholder="Tu correo electr&oacute;nico" <%if creado<>"1" then%>autofocus<%else%> value="<%=vEmail%>" <%end if%>><br>
                    </div>
                    <br>
                    <input class="submit" type="submit" value="Aceptar"><br>
                    </p>
    </form>

回答by Sparky

You cannot disable the button on the clickevent; because if the form is still invalid when you click the button, you will not be able to click it again. You can only disable it afterthe form has successfully passed validation.

您不能禁用click事件上的按钮；因为如果单击按钮时表单仍然无效，您将无法再次单击它。您只能在表单成功通过验证后禁用它。

Use the plugin's submitHandleroption for this as it's fired on a button click only when the form has passed validation.

submitHandler为此使用插件的选项，因为只有当表单通过验证时，它才会在单击按钮时触发。

<script>
$(document).ready(function() {

    $("#signupForm").validate({
        wrapper: "div",
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            email: "Use una cuenta de correo v&aacute;lida",
            password: {
                required: "Ingrese su contrase?a",
                minlength: "La contrase&ntilde;a al menos debe tener 5 caracteres"
            }
        },
        submitHandler: function(form) { // <- pass 'form' argument in
            $(".submit").attr("disabled", true);
            form.submit(); // <- use 'form' argument here.
        }
    });

});
</script>

NOTES:

笔记：

1. $().ready(function() {...is not recommendedas per jQuery documentation. Use $(document).ready(function() {...or $(function() {...instead.

2. You do not need the requiredinline HTML attribute when you've already declared the requiredrule within .validate().

3. Your submitHandlerwithin setDefaults()was broken. The signupForm.submit()line will do nothing because signupFormis an undefined variable. Define submitHandlerwithin .validate()and use the formargument as provided by the developer.

1. $().ready(function() {...根据 jQuery 文档，不推荐使用。使用$(document).ready(function() {...或$(function() {...代替。

2. 你不需要的required内嵌HTML属性，当你已经声明的required内规则.validate()。

3. 你的submitHandler内在setDefaults()被打破了。该signupForm.submit()行不会做任何事情，因为它signupForm是一个未定义的变量。submitHandler在内部定义.validate()并使用form开发人员提供的参数。

DEMO: http://jsfiddle.net/6foLxzmc/13/

演示：http: //jsfiddle.net/6foLxzmc/13/

回答by charlietfl

Bind to the submitevent instead of to the button click.

绑定到submit事件而不是按钮单击。

$('#signupForm').submit(function(){
   $(this).find('.submit').prop('disabled',true);
});

Alternatively do the disabling in submitHandleroption of plugin

或者在submitHandler插件选项中禁用