关于防止重复提交表单的问题

羊茂林 2013-07-12 10:39:40

防止重复提交表单，我有两种方案，但两种方案都有一个小问题。
方案一：在表单的提交事件中，显示一个遮罩层顺便应用提交按钮，代码如下：



$(document).ready(function(){

	$("form").bind("submit",function(){

		$('<div id="unloadMask"></div>').appendTo('body').height($("body").height());

		$("p.btn input").attr("disabled","disabled");

	});

});

但有个问题，我用的是ASP.NET MVC，并使用了MVC自带的表单验证功能，现在提交表单时，如果的客户端的数据验证没有通过，表单就不会提交，但自定义这个事件里的代码还是要执行，也就是说，表单没提交，但还是产生了遮罩层和禁用了按钮，我想在表单提交时，判断一下，只有当客户端数据验证都通过后，才执行里面的代码。

方案二：提交表单，意味着就要离开当前页面，所以我打算在页面离开前事件（onbeforeunload ）中，显示一个遮罩层，顺便把表单提交按钮也disabled，来防止表单重复提交，代码如下：



$(document).ready(function(){

	$(window).bind("beforeunload",function(){

		$('<div id="unloadMask"></div>').appendTo('body').height($("body").height());

		$("p.btn input").attr("disabled","disabled");

	});

});

但有个问题，在IE中，如果页面中有href为javascript:void(0)的超链接，在点击后，也会触发这个事件，而href="#111"这样的超链接就不会触发，而这些超链接又是由EasyUI动态生成的，虽然可以用程序批量把javascript:void(0)替换为#111，但我在考虑有没有更好的办法，比如：在触发beforeunload事件时，判断之前是提交的表单，还是点了某个超链接，只有刚才是提交了表单，才产生遮罩层。

...全文

262 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

羊茂林 2013-07-13

打赏
举报

完整代码


$(document).ready(function(){
	$("form").submit(function(e) {
        if($(this).valid()){
			$('<div id="unloadMask"></div>').appendTo('body').height($("body").height());
			$("p.btn input").attr("disabled","disabled");
		}
    });
});


#unloadMask {position:absolute;top:0px;left:0px;width:100%;filter:Alpha(Opacity=50);opacity:0.5;z-index:65535;background:#ccc url(loading.gif) center no-repeat;}

羊茂林 2013-07-13

打赏
举报

引用 7 楼 l676331991 的回复:

[quote=引用 6 楼 top8843 的回复:] [quote=引用 4 楼 l676331991 的回复:] 可以在浏览器中加断点，在你自己的submit中打断点debug一下，看看form是否已经由自带验证处理过了，如果处理过，看看form的属性上有没有迹象知道它是否通过验证了。如果ASP.NET MVC直接提供类似其他第三方的表单验证插件，有js方法直接判断是否通过验证，那就更好了。

MVC在jquery.validate的基础上，由jquery.validate.unobtrusive来进行数据验证，也许修改这个JS可行，但我感觉修改后，不利于升级。[/quote] 是基于jquery.validate么？那好说！


$("form").valid(); //true or false
$("form input[name=something]").valid(); //true or false

jquery.validate扩充了valid方法，可以用来判断form表单或者某个字段是否通过验证[/quote] 非常感谢，我就是一直在考虑，应该有这么一个办法，就是不知道具体该怎么写，谢谢！结贴

l676331991 2013-07-13

打赏
举报

引用 6 楼 top8843 的回复:

[quote=引用 4 楼 l676331991 的回复:] 可以在浏览器中加断点，在你自己的submit中打断点debug一下，看看form是否已经由自带验证处理过了，如果处理过，看看form的属性上有没有迹象知道它是否通过验证了。如果ASP.NET MVC直接提供类似其他第三方的表单验证插件，有js方法直接判断是否通过验证，那就更好了。


$("form").valid(); //true or false
$("form input[name=something]").valid(); //true or false

jquery.validate扩充了valid方法，可以用来判断form表单或者某个字段是否通过验证

羊茂林 2013-07-13

打赏
举报

引用 4 楼 l676331991 的回复:

可以在浏览器中加断点，在你自己的submit中打断点debug一下，看看form是否已经由自带验证处理过了，如果处理过，看看form的属性上有没有迹象知道它是否通过验证了。如果ASP.NET MVC直接提供类似其他第三方的表单验证插件，有js方法直接判断是否通过验证，那就更好了。

MVC在jquery.validate的基础上，由jquery.validate.unobtrusive来进行数据验证，也许修改这个JS可行，但我感觉修改后，不利于升级。

羊茂林 2013-07-13

打赏
举报

MVC自带的验证之后，没有通过的元素后面，会有如下标签


<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Area">
<span class="" for="Area">区县不能为空</span>
</span>

我就在自定义的submit事件中，判断如下代码得到的长度

$(".input-validation-error").length

length为0，就表示数据验证通过，初步测试可行，不知道还有没更好的方法。还没有发现form元素上有什么私有属性。

l676331991 2013-07-12

打赏
举报

可以在浏览器中加断点，在你自己的submit中打断点debug一下，看看form是否已经由自带验证处理过了，如果处理过，看看form的属性上有没有迹象知道它是否通过验证了。如果ASP.NET MVC直接提供类似其他第三方的表单验证插件，有js方法直接判断是否通过验证，那就更好了。

l676331991 2013-07-12

打赏
举报

好吧，那，ASP.NET MVC的自带验证有没有提供js方法，判断当前form是否通过的验证呢？或者，如果自己绑定的submit事件在ASP.NET MVC的自带验证验证之后触发执行的话，验证之后会不会在form的属性上有所体现呢，比如说私有属性什么的？如果有的话，在你自己的submit事件中就可以知道自带验证是否通过了。

羊茂林 2013-07-12