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

Question

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

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事件.

我发现通过双击快速我可以避免双击的大多数人.使用one事件是确保事件仅被触发一次的唯一真实方法.我不认为这种技术可以使用input type = submit标签"开箱即用".相反,您可以简单地使用输入类型=按钮或JQueryUI的.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 One活动: http ://api.jquery.com/one/

Answer 2

我用以下代码解决了它:

var tryNumber = 0;
 jQuery('input[type=submit]').click(function (event) {
     var self = $(this);

     if (self.closest('form').valid()) {
         if (tryNumber > 0) {
             tryNumber++;
             alert('Your form has been already submited. wait please');
             return false;
         }
         else {
             tryNumber++;
         }
     };
 });

注意:您还可以替换:

return false;

线,用于:

self.attr('disabled', true);

但是,如果您使用控制器上的提交按钮的名称来获取额外的逻辑,它们将被发送为空.(您可以在提交前使用额外的隐藏字段来收费)

就是这样,希望它有所帮助

罗德里戈

编辑:感谢这些帖子: jquery新手:结合验证与隐藏提交按钮

Answer 3

为什么不使用：

function disableButtons() {
    var form = $(this);
    var btns = $("input:submit", form);

    if (!form.valid()) {
        // allow user to correct validation errors and re-submit
        btns.removeAttr("disabled");
    } else {
        btns.attr("disabled", "disabled");
    }
}

禁用您的按钮并使用以下方法激活它：

$("form").bind("submit", disableButtons);