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实现多个重叠层点击切换效果的方法
Apr 24 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
vue3.0自定义指令(drectives)知识点总结
Dec 27 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 管理系统程序中的后门
2009/08/05 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
Javascript的闭包
2009/12/31 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
解析vue中的$mount
2017/12/21 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现迭代时使用索引的方法示例
2018/06/05 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python list与NumPy array 区分详解
2019/11/06 Python
python求质数列表的例子
2019/11/24 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
后进生转化工作制度
2014/01/17 职场文书
学雷锋宣传标语
2014/06/25 职场文书
白酒营销策划方案
2014/08/17 职场文书
办理房产证委托书
2014/09/18 职场文书
科学发展观标语
2014/10/08 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Python OpenCV形态学运算示例详解
2022/04/07 Python
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL