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

Question

我需要避免双击提交行为。我正在使用带有不显眼的库的客户端验证。我有以下代码来避免双重点击:

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

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

     jQuery('form').preventDoubleSubmit();

不幸的是，如果我的表单有一些有效的字段(例如，必填字段)，上面的代码仍然会被触发，因此，即使我更正了表单上的任何错误，我也无法再次提交。

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

Answer 1

您也可以使用 JQuery One event .

我发现我可以通过快速双击来克服大多数对双击的防范。使用 one 事件是确保事件只触发一次的唯一正确方法。我认为这种技术不会在带有 input type=submit 标签的情况下“开箱即用”。相反，您可以简单地使用 input type=button 或 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);
});

// 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); });
      $('#submitButton').removeClass('disabledButton');
   }
});

JQuery 一事件: http://api.jquery.com/one/