我想在“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álida",password: {
required: "Ingrese su contraseña",minlength: "La contraseñ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ónico<br>
<input id="email" name="email" type="email" required placeholder="Tu correo electró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ñ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参数.
