在项目开发中,测试人员报告缺陷说,即时有表单验证,但是如果快速点击两下“提交”按钮,系统会产生两条相同的记录。由于在项目中应用了Jquery Validation表单验证插件,所以要实现在Validation验证完毕后,提交form,然后禁止按钮。
CodeProject上有一个DisableBtnPostBack项目,但不无法和Jquery Validation结合,代码先贴出来,给大家提示下,碰到这种情况不要使用该代码。代码如下:
js:
![ContractedBlock.gif](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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) ' ;
}
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) ' ;
}
前端页面代码:
![ContractedBlock.gif](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<
asp:button
id
="btnOne"
tabIndex
="0"
Runat
="server"
Text
="Submit"
onclick ="btnOne_Click"
OnClientClick ="disableBtn(this.id, 'Submitting...')"
UseSubmitBehavior ="false" />
onclick ="btnOne_Click"
OnClientClick ="disableBtn(this.id, 'Submitting...')"
UseSubmitBehavior ="false" />
好了,以下代码可以解决提交按钮完成Validation插件的Form验证后禁止按钮,提交Form:
js:
![ContractedBlock.gif](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
$(document).ready(
function
() {
$( " #myForm " ).validate({
submitHandler: function (form) {
$(form).find( " :submit " ).attr( " disabled " , true ).attr( " value " ,
" Submitting... " );
form.submit();
}
})
});
$( " #myForm " ).validate({
submitHandler: function (form) {
$(form).find( " :submit " ).attr( " disabled " , true ).attr( " value " ,
" Submitting... " );
form.submit();
}
})
});