防止表单多次提交

Question

我有一些代码试图阻止表单被多次提交。我在另一个堆栈线程上找到了这段代码，但它不起作用。相反，它会无限次提交表单并滞后于整个服务器！

$(document).ready(function() {
    $('form').submit(function() {
        console.log("hi")
        if ($(this).valid()) {
            $(this).submit(function(){
                return false;
            });
            return true; //Tried with an without
        }
    });
});

这是控制台中输出的图片：

这样继续提交表单。我只是在那个号码拍了一张照片。

我从上面找到代码的线程是this question 上的公认答案，它有很多赞成票。

请注意，我每页有多个表单，并且许多页面包含许多表单！一种特定形式的解决方案是不够的。我需要一个全球解决方案。我也在使用 Codeigniter。

Answer 1

尝试传入事件并使用 e.preventDefault()

$(document).ready(function() {
    $('form').submit(function(e) {
        e.preventDefault();
        console.log("hi")
        if ($(this).valid()) {
            $(this).submit(function(){
                return false;
            });
        }
    });
});

Answer 2

如果我错了，请纠正我，但如果它有效，你不应该只是 return;，否则像 jQuery 文档的 example 那样停止提交。

$(document).ready(function() {
    $('form').submit(function(event) {
        console.log("hi")
        if ($(this).valid()) {
            return;
        }
        event.preventDefault();
    });
});

Answer 3

您需要取消初始表单提交，以便仅在验证后执行。但坦率地说，如果表单无效，HTML5 将不会提交，因此您的代码似乎是多余的。

这是一个工作示例，它将大部分 JQuery 排除在外。它只提交一次表单。

你也可以在这里测试：https://jsfiddle.net/5oyp6aa0/6/

$(function() {
    var theForm = document.querySelector("form");
    theForm.addEventListener("submit",function(evt) {
        // First, cancel the form's submission:
        evt.preventDefault();
        evt.stopPropagation();
        console.log("Navitve Submit Cancelled")
        if (theForm.checkValidity()) {
            // Then, only if it's valid, submit
            console.log("Manual Submit Triggered");
            theForm.submit();
        }
    });

});

Answer 4

在这些答案都不起作用后，我决定再试一次。这对我有用。

$(document).ready(function() {
    $("form").submit(function (e) {
        var attr = $(this).attr('submitted');
        if (typeof attr === typeof undefined || attr === false) {
            if ($(this).valid()) {
                $(this).attr('submitted', 'submitted');
                $(this).submit();
            } else {
                e.preventDefault();
            }
        } else {
            e.preventDefault();
        }
    });
});