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();
}
})
});

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈