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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
js new Date()实例测试
Oct 31 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
如何实现JS函数的重载
2006/09/22 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Python加速程序运行的方法
2020/07/29 Python
python3.5的包存放的具体路径
2020/08/16 Python
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
监理资料员岗位职责
2014/01/03 职场文书
《四季》教学反思
2014/04/08 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
消费者理赔投诉书
2015/07/02 职场文书
golang 实现并发求和
2021/05/08 Golang
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android