Jquery Validation插件防止重復提交表單的解決方法
更新時間：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:
代碼
復制代碼 代碼如下:
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();
}
})
});
相關(guān)文章
這篇文章主要介紹了jquery判斷input值不為空的方法的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單實用的輪播器制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
分享有關(guān)jQuery中animate、slide、fade等動畫的連續(xù)觸發(fā)、滯后反復執(zhí)行的bug
這篇文章主要介紹了分享有關(guān)jQuery中animate、slide、fade等動畫的連續(xù)觸發(fā)、滯后反復執(zhí)行的bug的相關(guān)資料,需要的朋友可以參考下2016-01-01
Jquery 動態(tài)添加元素并添加點擊事件實現(xiàn)過程解析
這篇文章主要介紹了Jquery 動態(tài)添加元素并添加點擊事件實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
jQuery實現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法【經(jīng)典】
這篇文章主要介紹了jQuery實現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法,可實現(xiàn)在彈出層外任意位置點擊關(guān)閉彈出層的功能,涉及jQuery事件操作方法,包含了詳盡的代碼功能說明,非常簡單實用,需要的朋友可以參考下2016-06-06
jquery如何改變html標簽的樣式(兩種實現(xiàn)方法)
對于如何修飾html標簽，這對于js來說，可以通過setAttribute來設(shè)置標簽的屬性，通過getAttribute來得到標簽的屬性，而在jq中當然也可以實現(xiàn)類似的功能，方法上肯定比js要簡化多了,接下來介紹實現(xiàn)方法，感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了jQuery實現(xiàn)模糊查詢的方法,結(jié)合實例形式分析了jQuery事件響應(yīng)、節(jié)點遍歷、查詢匹配、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
用JQuery 實現(xiàn)AJAX加載XML并解析的腳本
用JQuery 實現(xiàn)AJAX加載XML并解析的腳本2009-07-07
jQuery md5加密插件jQuery.md5.js用法示例
這篇文章主要介紹了jQuery md5加密插件jQuery.md5.js用法,結(jié)合實例形式簡單分析了jQuery md5加密插件jquery.md5.js的簡單使用技巧,需要的朋友可以參考下2018-08-08
幾種二級聯(lián)動案例（jQuery\Array\Ajax php）
這篇文章主要為大家詳細介紹了幾種二級聯(lián)動案例（jQuery\Array\Ajax php），具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08