关于防止重复提交表单的问题
防止重复提交表单,我有两种方案,但两种方案都有一个小问题。
方案一:在表单的提交事件中,显示一个遮罩层顺便应用提交按钮,代码如下:
$(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事件时,判断之前是提交的表单,还是点了某个超链接,只有刚才是提交了表单,才产生遮罩层。
------解决方案--------------------
是基于jquery.validate么?那好说!
$("form").valid(); //true or false
$("form input[name=something]").valid(); //true or false
jquery.validate扩充了valid方法,可以用来判断form表单或者某个字段是否通过验证