在HTML5验证后禁用所有表单的提交按钮的通用jQuery

Question

请原谅我如果这是一个基础的问题，因为我是JavaScript/jQuery的新学者。我一直在尝试禁用提交按钮以防止多次提交。我在这里找到了多种解决方案，但所有这些解决方案都使用了特定的表单名称。但我想为所有页面上的所有表单应用全局解决方案，这样我就不必在每个页面上编写代码，所以我将以下代码放在页脚中，以便所有页面都拥有该功能：

$('input:submit').click(function(){
        $('input:submit').attr("disabled", true);
});

这段代码可以在所有页面的所有表单中正常工作，但如果表单中有HTML5必填字段并且表单未填写它们，则会弹出通知，但按钮仍然被禁用。因此，我尝试了以下方法：

$('input:submit').click(function(){
    if ($(this).valid()) {
        $('input:submit').attr("disabled", true);
        $('.button').hide();
    });
});

但这并不起作用。请帮我，使得jQuery仅在完成所有HTML5验证时才禁用。谢谢。

- Hashmi

---

也许你可以尝试使用 $('form').on('submit',function(){$(this).find('input:submit').attr("disabled", true);});。这段代码的作用是在表单提交时禁用提交按钮。 - Umesh Sehta

如果它对你有用，我很高兴 :) 请注意，注释不能作为答案选择。 - Umesh Sehta

Answer 1

试一下这个，然后告诉我：

$('input:submit').click(function(){
    if ($(this).closest("form").checkValidity()) {
        $('input:submit').attr("disabled", true);
        $('.button').hide();
    });
});

- Ruprit

---

工作了，但是我必须小心你的语法，并使用下标来获取closest()返回的数组中的第一个表单。 - Vijay Kumar Kanta

Answer 2

Ruprit，非常感谢你提供的建议。在Firefox中，你的例子对我没有用，但它给了我很大帮助。

下面是我的解决方案：

$(document).on("click", ".disable-after-click", function() {
    var $this = $(this);

    if ($this.closest("form")[0].checkValidity()) {
        $this.attr("disabled", true);
        $this.text("Saving...");
    }
});

由于checkValidity()不是jQuery函数而是JavaScript函数，因此您需要访问JavaScript元素而不是jQuery对象。这就是为什么在$this.closest("form")之后必须加上[0]的原因。

使用此代码，您只需要将class="disable-after-click"添加到按钮、输入框、链接或其他您需要的地方即可...

- Petr

Answer 3

最好将处理程序附加到“提交”事件而不是“单击”事件，因为“提交”事件仅在验证成功后才会触发。（这样可以避免自己检查有效性。）但请注意，如果提交按钮被禁用，则它们可能持有的任何值都不会提交到服务器。因此，我们需要在表单提交后禁用输入。问题变得更加复杂，因为新的HTML5属性“form”允许关联的输入出现在页面的任何位置，只要它们的“form”属性与表单ID匹配即可。以下是我使用的JQuery代码片段：

$(document).ready( function() {
    $("form").on("submit", function(event) {
        var $target = $(event.target);
        var formId  = $target.attr("id");

        // let the submit values get submitted before we disable them
        window.setTimeout(function() {

            // disable all submits inside the form
            $target.find("[type=submit]").prop("disabled", true);

            // disable all HTML5 submits outside the form
            $("[form=" + formId + "][type=submit]").prop("disabled", true);
        }, 2); // 2ms
    });
});

---[ 警告 ]---

虽然禁用提交按钮可以防止多次表单提交，但是此操作会导致一个不幸的副作用：如果用户点击了[返回]按钮，这些按钮将继续保持禁用状态。

想象一下这种情况，用户编辑了一些文本，点击提交（并被重定向到另一个页面以查看编辑内容），再点击返回以进行更多编辑... ... 然后... 他们无法重新提交！

解决方案是在页面载入时重新启用提交按钮：

// re-enable the submit buttons should the user click back after a "Save & View"
$(document).ready( function() {
    $("form").each(function() {
        var $target = $(this);
        var formId  = $target.attr("id");

        // enable all submits inside the form
        $target.find("[type=submit]").prop("disabled", false);

        // enable all HTML5 submits outside the form
        $("[form=" + formId + "][type=submit]").prop("disabled", false);
    });
});

- Steve Eynon

Answer 4

尝试这个。

`jQuery('input[type=submit]').click(function(){ return true;jQuery(this).prop('disabled','disabled');})`

在表单验证成功后运行此代码。

- Patrick Mutwiri