javascript - 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);
    }
});