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 相关文章推荐
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
javascript常见用法总结
May 22 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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
模拟xcopy的函数
2006/10/09 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Python中的sort()方法使用基础教程
2017/01/08 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
python调用支付宝支付接口流程
2019/08/15 Python
Python time库基本使用方法分析
2019/12/13 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
部队万能检讨书
2014/02/20 职场文书
中国好声音广告词
2014/03/18 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
商业门面租房协议书
2014/11/25 职场文书
公司更名通知函
2015/04/24 职场文书
跳高加油稿
2015/07/21 职场文书
单位提档介绍信
2015/10/22 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS