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

前端之家收集整理的这篇文章主要介绍了如何在jQuery验证后禁用/启用提交按钮?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在“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>

解决方法

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

使用插件的submitHandler选项,因为只有在表单通过验证时才会点击按钮.

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

    $("#signupForm").validate({
        wrapper: "div",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>

笔记:

> $().ready(function(){… is not recommended as per jQuery documentation.使用$(document).ready(function(){…或$(function(){…代替.
>当您已在.validate()中声明所需规则时,不需要所需的内联HTML属性.
> setDefaults()中的submitHandler被破坏了. signupForm.submit()行将不执行任何操作,因为signupForm是一个未定义的变量.在.validate()中定义submitHandler并使用开发人员提供的form参数.

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

原文链接:https://www.f2er.com/jquery/180979.html

猜你在找的jQuery相关文章