Jquery Validation插件防止重復(fù)提交表單的解決方法

在項(xiàng)目開(kāi)發(fā)中，測(cè)試人員報(bào)告缺陷說(shuō)，即時(shí)有表單驗(yàn)證，但是如果快速點(diǎn)擊兩下“提交”按鈕，系統(tǒng)會(huì)產(chǎn)生兩條相同的記錄。由于在項(xiàng)目中應(yīng)用了Jquery Validation表單驗(yàn)證插件，所以要實(shí)現(xiàn)在Validation驗(yàn)證完畢后，提交form，然后禁止按鈕。

CodeProject上有一個(gè)DisableBtnPostBack項(xiàng)目，但不無(wú)法和Jquery Validation結(jié)合，代碼先貼出來(lái)，給大家提示下，碰到這種情況不要使用該代碼。代碼如下：

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

前端頁(yè)面代碼： 

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

好了，以下代碼可以解決提交按鈕完成Validation插件的Form驗(yàn)證后禁止按鈕，提交Form：

js代碼：

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

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)