jQuery 验证后如何 disable/enable 提交按钮？

Question

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

脚本：

<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

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

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

或者在插件的 submitHandler 选项中禁用

Answer 2

您不能禁用 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álida", password: { required: "Ingrese su contraseña", minlength: "La contraseñ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>

备注：

$().ready(function() {...is not recommended as per jQuery documentation。请改用 $(document).ready(function() {... 或 $(function() {...。

如果您已经在 .validate().[=28 中声明了 required 规则，则不需要 required 内联 HTML 属性=]

你的 setDefaults() 内的 submitHandler 坏了。 signupForm.submit() 行什么都不做，因为 signupForm 是一个未定义的变量。在 .validate() 中定义 submitHandler 并使用开发人员提供的 form 参数。

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

Answer 3

如果您无法访问表单验证初始化，此方法可以提供帮助：

            jQuery('#form').on('submit', function () {
                if (jQuery(this).data('form_is_invalid')) {
                    jQuery(this).data('form_is_invalid', false);
                } else {
                    jQuery(this).find('.submit').prop('disabled', true);
                }
            }).on('invalid-form.validate', function () {
                jQuery(this).data('form_is_invalid', true);
            });

jQuery 验证后如何 disable/enable 提交按钮？

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

jquery

jquery-validate