Jquery Validation插件防止重復(fù)提交表單的解決方法
更新時間:2010年03月05日 23:08:07 作者:
在項目開發(fā)中,測試人員報告缺陷說,即時有表單驗證,但是如果快速點擊兩下“提交”按鈕,系統(tǒng)會產(chǎn)生兩條相同的記錄。
由于在項目中應(yīng)用了Jquery Validation表單驗證插件,所以要實現(xiàn)在Validation驗證完畢后,提交form,然后禁止按鈕。
CodeProject上有一個DisableBtnPostBack項目,但不無法和Jquery Validation結(jié)合,代碼先貼出來,給大家提示下,碰到這種情況不要使用該代碼。代碼如下:
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();
}
})
});
CodeProject上有一個DisableBtnPostBack項目,但不無法和Jquery Validation結(jié)合,代碼先貼出來,給大家提示下,碰到這種情況不要使用該代碼。代碼如下:
js:
代碼
復(fù)制代碼 代碼如下:
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)';
}
前端頁面代碼:
代碼
復(fù)制代碼 代碼如下:
<asp:button id="btnOne" tabIndex="0" Runat="server" Text="Submit"
onclick="btnOne_Click"
OnClientClick="disableBtn(this.id, 'Submitting...')"
UseSubmitBehavior="false" />
好了,以下代碼可以解決提交按鈕完成Validation插件的Form驗證后禁止按鈕,提交Form:
js:
代碼
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$("#myForm").validate({
submitHandler: function(form) {
$(form).find(":submit").attr("disabled", true).attr("value",
"Submitting...");
form.submit();
}
})
});
相關(guān)文章
jQuery復(fù)制節(jié)點用法示例(clone方法)
這篇文章主要介紹了jQuery復(fù)制節(jié)點的方法,結(jié)合實例形式分析了clone方法復(fù)制節(jié)點及appendTo方法追加節(jié)點的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎
這篇文章主要為大家詳細(xì)介紹了用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02jQuery模擬下拉框選擇對應(yīng)菜單的內(nèi)容
這篇文章主要介紹了jQuery模擬下拉框選擇對應(yīng)菜單的內(nèi)容,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03