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

Question

防止重复提交表单，我有两种方案，但两种方案都有一个小问题。
方案一：在表单的提交事件中，显示一个遮罩层顺便应用提交按钮，代码如下：$(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事件时，判断之前是提交的表单，还是点了某个超链接，只有刚才是提交了表单，才产生遮罩层。JavaScriptMVC

Answer 1

不明白，ASP.NET MVC自带的表单验证功能，如果验证失败，也会触发form的submit事件么？为什么呢？验证失败不会阻止表单的提交么？

Answer 2

我想，自带的验证功能，在提交表单时，触发submit事件，而这个事件中会有判断，如果数据验证没通过，就return false，阻止提交表单，而我自定义的submit事件，就不知道该如何判断数据验证是否通过了。

Answer 3

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

Answer 4

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

Answer 5

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元素上有什么私有属性。

Answer 6

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

Answer 7

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表单或者某个字段是否通过验证

Answer 8

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表单或者某个字段是否通过验证非常感谢，我就是一直在考虑，应该有这么一个办法，就是不知道具体该怎么写，谢谢！结贴

Answer 9

完整代码$(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;}