日期:2014-05-16  浏览次数:20356 次

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

$(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事件时,判断之前是提交的表单,还是点了某个超链接,只有刚才是提交了表单,才产生遮罩层。
JavaScript MVC

------解决方案--------------------
引用:
Quote: 引用:

可以在浏览器中加断点,在你自己的submit中打断点debug一下,看看form是否已经由自带验证处理过了,如果处理过,看看form的属性上有没有迹象知道它是否通过验证了。

如果ASP.NET MVC直接提供类似其他第三方的表单验证插件,有js方法直接判断是否通过验证,那就更好了。

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


是基于jquery.validate么?那好说!

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


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