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 相关文章推荐
JavaScript 常用函数库详解
Oct 21 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
javascript如何创建对象
Aug 29 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
深入理解js中this的用法
2016/05/28 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python 字符串操作方法大全
2014/03/11 Python
python实现计算资源图标crc值的方法
2014/10/05 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python如何实现视频转代码视频
2019/06/17 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
学生党员思想汇报范文
2014/01/09 职场文书
上课迟到检讨书
2014/02/19 职场文书
《影子》教学反思
2014/02/21 职场文书
迎元旦广播稿
2014/02/22 职场文书
植树造林的宣传标语
2014/06/23 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
小学中队委竞选稿
2015/11/20 职场文书
体育部部长竞选稿
2015/11/21 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript