Jquery Validation插件防止重复提交表单的解决方法

216 阅读 0 评论 143 点赞

我是靠谱客的博主诚心大炮，最近开发中收集的这篇文章主要介绍Jquery Validation插件防止重复提交表单的解决方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

由于在项目中应用了Jquery Validation表单验证插件，所以要实现在Validation验证完毕后，提交form，然后禁止按钮。
CodeProject上有一个DisableBtnPostBack项目，但不无法和Jquery Validation结合，代码先贴出来，给大家提示下，碰到这种情况不要使用该代码。代码如下：
js:
代码

复制代码代码如下:

 
function disableBtn(btnID, newText) { 
Page_IsValid = null; 
if (typeof (Page_ClientValidate) == 'function') { 
Page_ClientValidate(); 
} 
var btn = document.getElementById(btnID); 
var isValidationOk = Page_IsValid; 
if (isValidationOk !== null) { 
if (isValidationOk) { 
btn.disabled = true; 
btn.value = newText; 
btn.style.background = "url(12501270608.gif)"; 
} 
else { 
btn.disabled = false; 
} 
} 
else { 
setTimeout("setImage('"+btnID+"')", 10); 
btn.disabled = true; 
btn.value = newText; 
} 
} 
function setImage(btnID) { 
var btn = document.getElementById(btnID); 
btn.style.background = 'url(12501270608.gif)'; 
} 

前端页面代码：
代码

复制代码代码如下:

 
<asp:button id="btnOne" tabIndex="0" Runat="server" Text="Submit" 
onclick="btnOne_Click" 
OnClientClick="disableBtn(this.id, 'Submitting...')" 
UseSubmitBehavior="false" /> 

好了，以下代码可以解决提交按钮完成Validation插件的Form验证后禁止按钮，提交Form：
js:
代码

复制代码代码如下:

 
$(document).ready(function() { 
$("#myForm").validate({ 
submitHandler: function(form) { 
$(form).find(":submit").attr("disabled", true).attr("value", 
"Submitting..."); 
form.submit(); 
} 
}) 
}); 