Javascript 使用“单击并输入”提交两次表单

我正在使用jQuery验证来验证我的表单。在每次验证时，我都使用

submitHandler

通过ajax将表单提交给我的控制器（我使用的是asp.net core 3.1，但我认为没有那么重要）。但是，通过双击submit按钮，我的应用程序将使用相同的数据执行两个条目。同样的情况也会发生在多次输入时

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

我的大多数表单都处于模式中，可能是这种模式激发了这样的行为，但我仍然找不到有效的解决方案。下面是其中一个表单的示例源代码-所有其他表单都使用类似的结构：

带有表单的模态

<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>

提交表单的功能：

$(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方法之前，但没有任何解决方案对我有帮助

---

我想通知您一个解决方案，但不将此问题标记为重复，正如我引用的两次一样，到目前为止，没有任何解决方案有效

不止两次，如果您单击三次，它将被提交三次，这也需要n次单击

提交表单时，需要禁用

提交按钮

，并在

$时启用该按钮。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();
        }
    });
}

---

试着用我的方法。希望这能有所帮助。：）

---

文档一准备好就调用

validate（）

函数？为什么？@ScottMarcus这是我最后一次尝试看看它是否有效。即使在

documentready

之外，问题仍然存在，只有在发生

submit

事件时才应调用

validate（）

。请显示所有相关代码。您提到“双击提交按钮”加油！！！只要你点击它，它就会工作，所以你需要在成功后隐藏、更改或禁用submit按钮。你提到使用

event.preventDefault（）

，但代码没有显示这一点。传递给

submitHandler

的函数被赋予

表单

和

事件

。您是否正在调用传递给

sendFormUserTest

函数的事件的

preventDefault（）

？

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