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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
js模块加载方式浅析
Aug 12 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
微信小程序实现多图上传
Jun 19 Javascript
详解Vue的mixin策略
Nov 19 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 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
对Python中内置异常层次结构详解
2018/10/18 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
在C#中如何实现多态
2014/07/02 面试题
车间统计员岗位职责
2014/01/05 职场文书
公司离职证明范本
2014/01/13 职场文书
学校安全教育制度
2014/01/31 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
法人委托书的范本格式
2014/09/11 职场文书
悬空寺导游词
2015/02/05 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
Pygame Time时间控制的具体使用详解
2021/11/17 Python
python图像处理 PIL Image操作实例
2022/04/09 Python