如何在jQuery验证后禁用/启用“提交"按钮?

问题描述

我想在"on_click"事件后禁用表单的提交按钮，此jscript可以成功执行此操作，但是当我对电子邮件进行更正后，如果使用jquery验证了不正确的电子邮件，然后按了提交按钮， ，该按钮仍处于禁用状态.我该怎么解决！！

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!?

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>

推荐答案

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

You cannot disable the button on the click event; 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 after the form has successfully passed validation.

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

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

<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>

注释:

根据jQuery文档，

1. $().ready(function() {... 不推荐 >.改用$(document).ready(function() {...或$(function() {....

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

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

You do not need the required inline HTML attribute when you've already declared the required rule within .validate().

您在setDefaults()中的submitHandler已损坏. signupForm.submit()行将不执行任何操作，因为signupForm是未定义的变量.在.validate()中定义submitHandler并使用开发人员提供的form自变量.

Your submitHandler within setDefaults() was broken. The signupForm.submit() line will do nothing because signupForm is an undefined variable. Define submitHandler within .validate() and use the form argument as provided by the developer.

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

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

这篇关于如何在jQuery验证后禁用/启用“提交"按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！