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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
Javascript中async与await的捕捉错误详解
Mar 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
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
理解JavaScript原型链
2016/10/25 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
Python中操作符重载用法分析
2016/04/29 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Python同时处理多个异常的方法
2020/07/28 Python
python爬取音频下载的示例代码
2020/10/19 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
四查四看整改措施
2014/09/19 职场文书
会计电算化实训报告
2014/11/04 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android