Question

我想在＆＃34; on_click＆＃34;之后禁用表单的提交按钮。事件，这个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á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() {...。

当您已在required内声明required规则时，您不需要.validate()内联HTML属性。

submitHandler内的setDefaults()被破坏了。 signupForm.submit()行无效，因为signupForm是未定义的变量。在submitHandler中定义.validate()并使用开发人员提供的form参数。

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

Answer 2

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

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

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

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验证后禁用/启用提交按钮？

3 个答案: