程序员人生 网站导航

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

栏目:jquery时间:2013-11-13 03:11:38

在项目开发中,测试人员报告缺陷说,即时有表单验证,但是如果快速点击两下“提交”按钮,系统会产生两条相同的记录。由于在项目中应用了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();
}
})
});

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐