MVC - 用户双击提交按钮的问题

Question

我的 MVC 应用程序中有许多页面，用户单击提交按钮来发布表单。有时用户会单击提交，但由于没有立即发生，请再次单击它。因此，表单提交了两次。为了防止这种情况，我有以下 JavaScript 代码：

// When the user submits the form, disable the Save button so there is no chance
// the form can get double posted.
$('#form').submit(function () {
    $(this).find('input[type=submit]').prop('disabled', true);

    return true;
});

此代码禁用提交按钮，因此用户无法单击两次。这工作正常。但是，如果表单上存在客户端验证错误，则提交按钮将被禁用，但表单永远不会发布，现在用户无法发布表单。我可以对 JS 代码进行更改以检测是否存在客户端验证错误，如果是，我要么不禁用提交按钮，要么重新启用它？

Answer 1

如果您使用的是 jQuery Validate，您可以在禁用按钮之前检查表单是否有效：

$('#form').submit(function () {
    if ($(this).valid()) {
        $(this).find('input[type=submit]').prop('disabled', true);
    }
});

Answer 2

你可以试试这样的：

<button id="subButton" /> <!-- do not use type="submit" because some browsers will automatically send the form -->

Javascript：

$('#subButton').click(function (e) {
    e.preventDefault(); //prevent browser's default behaviour to submit the form
    $(this).prop('disabled', true);
    doValidation();
});

var pTimeout;
function doValidation() {
ajaxLoader.show(); //lock the screen with ajaxLoader
var form = $('#registerForm');
var isPending = form.validate().pendingRequest !== 0; // find out if there are any pending remote requests ([Remote] attribute on model)
if (isPending) {
    if (typeof pTimeout !== "undefined") {
        clearTimeout(pTimeout);
    }
    pTimeout = setTimeout(doValidation, 200); //do the validation again until there are no pending validation requests
}
var isValid = form.valid(); //have to validate the form itself (because form.Valid() won't work on [Remote] attributes, thats why we need the code above
if (!isPending) {
    ajaxLoader.hide();
    if (isValid) {
        $('#registerForm').submit(); //if there are no pending changes and the form is valid, you can send it
    }
    else {
        $('#subButton').prop('disabled', false); //else we reenable the submit button
    }
}};

Answer 3

切换它。

$("input[type='submit']").on("click", function (event) {
   event.preventDefault();
   $(this).prop("disabled", true);
   // perform error checking
   if (noErrors) {
      $("#form").submit();
   }
   else {
      $(this).prop("disabled", false);
   }
});