asp.net-mvc-3 – ASP.NET MVC – 如何防止双击提交与jquery.validate.unobtrusive lib？

我需要避免双击提交行为.我正在使用不引人注目的库的客户端验证.我有以下代码来避免双重歧义：

jQuery.fn.preventDoubleSubmit = function () {
         var alreadySubmitted = false;
         return jQuery(this).submit(function () {

             if (alreadySubmitted)
                 return false;
             else {
                 alreadySubmitted = true;
             }
         });
     };

     jQuery('form').preventDoubleSubmit();

不幸的是,如果我的表单有一些可以验证的字段(例如一个必填字段),上面的代码仍然被触发,因此,即使我更正了表单上的任何错误,我将无法再次提交.

在验证成功完成后,如何触发双击代码？

解决方法

您也可以使用 JQuery One event.

我发现,通过双击快速,我可以得到最多的防守双击.使用一个事件是确保事件只被触发一次的唯一真正的方法.我不认为这种技术将使用输入type = submit标签“开箱即用”.相反,您只需使用输入类型=按钮或JQueryUI’s .button().

$("#submitButton").one("click",function(event) {
   $('#theForm').submit();
});

如果您需要在验证错误(或其他情况)下重新连接事件,我建议您为事件处理程序创建一个函数.该函数在此示例中不是必需的,因为所有事件处理程序都提交表单,但在更复杂的情况下,您可能希望避免重复.

function submitClick(event) {
   $('#theForm').submit();
}

$("#submitButton").one('click',function(event) {
   submitClick(event);
});

// This handler will re-wire the event when the form is invalid.
$('#theForm').submit(function(event) {
   if (!$(this).valid()) {
      event.preventDefault();
      $('#submitButton').one('click',function(event) { submitClick(event); });
   }
});

如果您想向用户反馈该按钮不再工作,您可以在此处添加禁用代码.使用One事件的一个很大的副作用是您实际上不必使按钮被禁用,您可以使用自己的风格.

function submitClick(event) {
   $('#submitButton').addClass('disabledButton');
   $('#theForm').submit();
}

$("#submitButton").one('click',function(event) { submitClick(event); });
      $('#submitButton').removeClass('disabledButton');
   }
});

JQuery One Event：http://api.jquery.com/one/