教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 Jquery Validation插件如何防止重复提交表单

Jquery Validation插件如何防止重复提交表单

发布时间:2015-10-26   编辑:jiaochengji.com
本文介绍下,在使用Jquery Validation插件时,如何防止表单的重复提交呢?有需要的朋友,可以看下本文给出的解决方法。

问题:
在使用jquery Validation插件进行表单验证时,即使有表单验证,当快速点击两下“提交”按钮,系统会产生两条相同的记录。

解决办法:
在Validation验证完毕后,提交form,然后禁止按钮。

1,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)';
}

2,前端页面部分
 

复制代码 代码示例:
<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();
}
})
});

您可能感兴趣的文章:
Jquery Validation插件如何防止重复提交表单
Jquery Validation插件防止重复提交表单的解决方法
JQuery的Validation插件中Remote验证的中文问题
jQuery Inline Form Validation Engine
jQuery表单验证插件 Validation
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
asp.net防止后退与重复提交表单的简单方法
jQuery表单验证插件 Form Validation
jquery 防止表单重复提交代码
php token防止表单重复提交的实例代码

[关闭]
~ ~