Jquery Validation插件防止重复提交表单的解决方法


Posted in Javascript onMarch 05, 2010

由于在项目中应用了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(); 
} 
}) 
});
Javascript 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
JS中如何优雅的使用async await详解
Oct 05 Javascript
javascript下判断一个元素是否存在的代码
Mar 05 #Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 #Javascript
js 获取服务器控件值的代码
Mar 05 #Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 #Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 #Javascript
ExtJS 工具栏 分页事件参数
Mar 05 #Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
深入php处理整数函数的详解
2013/06/09 PHP
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
js实现全选反选不选功能代码详解
2019/04/24 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
使用python实现多维数据降维操作
2020/02/24 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
招商经理岗位职责
2013/11/16 职场文书
学生励志演讲稿
2014/01/06 职场文书
中考冲刺决心书
2014/03/11 职场文书
青蓝工程实施方案
2014/03/27 职场文书
保护环境建议书400字
2014/05/13 职场文书
应届生找工作求职信
2014/06/24 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
2014司机年终工作总结
2014/12/05 职场文书
十岁生日答谢词
2015/01/05 职场文书
实习单位推荐信
2015/03/27 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
岁月神偷观后感
2015/06/11 职场文书
Python中time标准库的使用教程
2022/04/13 Python