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

Question

我想在"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 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>

Answer 1

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

使用插件的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>

笔记:

1. $().ready(function() {... 不建议按照jQuery文档.使用$(document).ready(function() {...或$(function() {...代替.

2. required当您已在其中声明required规则时,不需要内联HTML属性.validate().

3. 你的submitHandler内心setDefaults()被打破了.该signupForm.submit()行将不执行任何操作,因为它signupForm是一个未定义的变量.定义submitHandler之内.validate(),并使用form参数为开发商提供的.

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