表单通过单击并输入提交两次

Question

我正在使用 jQuery Validate 来验证我的表单。在每次验证时，我使用submitHandler 通过 ajax 将表单提交到我的控制器（我使用的是 asp.net core 3.1，但我认为它不那么相关）。但是，通过双击提交按钮，我的应用程序会执行两个具有相同数据的条目。多次输入也会发生同样的事情。

我研究了不同的解决方案，但到目前为止没有一个对我有用。其中一些是：

jQuery preventing form from being submited twice and on enter key

Prevent double form submission

Prevent AJAX form from submitting twice?

Prevent submit form twice with change event

我的大多数表单都是模态的，也许这激发了这样的行动，但我仍然找不到有效的解决方案。所以这里是其中一种形式的示例源代码 - 所有其他形式都使用类似的结构：

有形式的模态

<div class="modal fade" id="modal-user-test" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">New Test</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="form-user-test" autocomplete="off">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control form-control-sm" name="Name" placeholder="Name" maxlength="120" autocomplete="off" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-warning" data-dismiss="modal">Back</button>
                    <button class="btn btn-outline-success" type="submit">Salve</button>
                </div>
            </form>
        </div>
    </div>
</div>

要验证的 JS：

$(document).ready(function() {
    $("#form-user-test").validate({
        rules: {
            Name: {
                required: true, 
                minlength: 2
            }
        },
        messages: {
            Name: {
                required: "The name is required",
                minlength: "Enter at least two characters"
            }
        },
        submitHandler: sendFormUserTest
    });
});

提交表单的功能：

function sendFormUserTest(form) {
    $.ajax({
        url: `/User/Save`,
        type: "POST",
        dataType: "json",
        data: $(form).serialize(),
        success: function (resposta) {
            messageSuccess(resposta.Message);
            $("#modal-user-test").modal("hide");
        },
        error: showErrorMessage
    });
}

我曾尝试在不同的地方使用event.stopPropagation()，event.preventDefault()，例如在表单提交功能中调用document ready中的valite方法之前，但没有解决方案对我有帮助。

我想在不将此问题标记为重复的情况下通知您一个解决方案，因为我引用了两次，到目前为止还没有解决方案起作用。

Answer 1

不只是两次，如果你点击它三次，它会被提交三次，这也适用于 n 次点击。

您需要在提交表单时禁用submit button，并在$.ajax调用成功或错误回调时启用按钮。

let $elem = $('#form-user-test button[type="submit"]');
function handleButton(enable){
    if(enable) $elem.removeAttr('disabled');
    else $elem.attr('disabled','disabled');
}
function sendFormUserTest(form) {
    handleButton(false);
    $.ajax({
        url: `/User/Save`,
        type: "POST",
        dataType: "json",
        data: $(form).serialize(),
        success: function (resposta) {
            handleButton(true);
            messageSuccess(resposta.Message);
            $("#modal-user-test").modal("hide");
        },
        error: function(){
            handleButton(true);
            showErrorMessage();
        }
    });
}

Answer 2

尝试使用我的方法。希望这会有所帮助。 :)

let psBuild = { busy: false, }
$(document).on('click', '.options__button--search', function (e){
        e.preventDefault();
        if (!psBuild.busy) { // void double click
            psBuild.busy = true;
            // your ajax here ...
        } else {
            bind_ps_getNotication( 'INFO', 'Please wait ...' );
            psBuild.busy = false;
        }
    });

Answer 3

let submitted_form = false;
$("#form-user-test").validate({
    rules: {
        Name: {
            required: true,
            minlength: 2
        }
    },
    messages: {
        Name: {
            required: "The name is required",
            minlength: "Enter at least two characters"
        }
    },
    submitHandler: function(form) {
        if (submitted_form === true) {
            return false;
        } else {
            submitted_form = true;
            sendFormUserTest();
        }
    }
});