Jquery Validation插件防止重复提交表单的解决方法

2016-02-19 13:33 166 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐Jquery Validation插件防止重复提交表单的解决方法,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

由于在项目中应用了Jquery Validation表单验证插件,所以要实现在Validation验证完毕后,提交form,然后禁止按钮。
CodeProject上有一个DisableBtnPostBack项目,但不无法和Jquery Validation结合,代码先贴出来,给大家提示下,碰到这种情况不要使用该代码。代码如下:
js:
代码

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
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)';
}

前端页面代码:
代码

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
asp:button tabIndex="0" Runat="server" Text="Submit"
onclick="btnOne_Click"
OnClientClick="disableBtn(this.id, 'Submitting...')"
UseSubmitBehavior="false" /

好了,以下代码可以解决提交按钮完成Validation插件的Form验证后禁止按钮,提交Form:
js:
代码

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
$(document).ready(function() {
$("#myForm").validate({
submitHandler: function(form) {
$(form).find(":submit").attr("disabled", true).attr("value",
"Submitting...");
form.submit();
}
})
});

来源:https://www.tulaoshi.com/n/20160219/1604623.html

延伸阅读
标签: Web开发
网上的各类表单验证插件的验证规则都是写在脚本里的,但我的插件的验证规则却是写在表单元素的属性里的。如下面的例子: 代码如下: input name="name" type="text" id="name" size="30" jvpattern="^.+$" jverrortip="请输入正确的姓名." jvtipid="spt_name" jvmethod="checkname" / span id="spt_name" class="normaltips" jverrorclass="e...
标签: Web开发
之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐。学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话...
标签: ASP
在Internet上我们每天都会遇到数不清的表单,也看到其中大部分并没有限制用户多次提交同一个表单。缺乏这种限制有时候会产生某些预料不到的结果,如重复订阅邮件服务或重复投票等。或许一些asp初学者并不清楚在asp应用中如何限制重复提交同一表单,所以在这里向大家介绍在ASP应用中防止用户在当前会话期间多次提交同一表单的一个简单方法。 ...
iphone联系人重复解决方法 你在设置 邮件、通讯录、日历开启多个账户来同步时可能会出现联系人重复的问题,重复几个倒没什么,如果重复太多,怎么办? 这个时候就要想起 iTools,用它我们可以快速合并重复联系人。 电脑准备工作 1、前往下载iTools。软件名称:iTools2013 Beta(1115)中文版 2、使用数据线将iPhone 连...
iphone联系人重复的解决方法 你在设置 邮件、通tulaoShi.com讯录、日历开启多个账户来同步时可能会出现联系人重复的问题,重复几个倒没什么,如果重复太多,怎么办? 这个时候就要想起 iTools,用它我们可以快速合并重复联系人。 电脑准备工作 1、下载iTools。 2、使用数据线将iPhone 连接至电脑。 TuLaoShi.com...

经验教程

611

收藏

41
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部