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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
vue组件间通信解析
Mar 01 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
js中Array对象的常用遍历方法详解
Jan 17 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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_MySQL教程-第一天
2007/03/18 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
python操作cfg配置文件方式
2019/12/22 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
Java如何支持I18N?
2016/10/31 面试题
科技之星事迹材料
2014/06/02 职场文书
公司年终奖分配方案
2014/06/16 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
出售房屋协议书范本
2014/10/06 职场文书
综合测评自我评价
2015/03/06 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL