禁用表单提交按钮，而不阻止 HTML5 验证

Posted 2023-05-09

【中文标题】禁用表单提交按钮，而不阻止 HTML5 验证

【英文标题】：Disable button on form submit, without preventing HTML5 validation

【发布时间】：2021-02-03 09:21:12

【问题描述】：

希望人们在我拔头发时能提供帮助。点击后我需要禁用按钮，因为我的一些可爱的用户喜欢垃圾邮件点击按钮：

目前，如果他们尝试在未填写字段的情况下提交，表单会显示 html5 验证错误（两个字段都是必需的）。但是我实现的任何东西，onclick，onsubmit，所有使用 JS 禁用按钮的东西都意味着 HTML 验证不再运行。我已经在表单和按钮上尝试过，在事件函数调用和事件监听器中使用过。我被难住了。

我知道我可以使用 JS 完成验证，但如果我可以使用 HTML5，我真的不想这样做；复制现有功能有什么意义......？这可能吗，还是我需要从 JS 角度添加验证？

过了一会儿，我想取消禁用按钮，让他们有机会响应验证错误（如果适用），否则到那时表单应该已经提交并且服务器正忙于咀嚼发布数据.比如：

$("#submit_button").prop('disabled', true)
setTimeout(() => 
    $("#submit_button").prop('disabled', false)
, 2000)

编辑： 我被告知禁用该按钮会禁用进行 html5 验证的能力。那么如何在不禁用按钮的情况下阻止用户多次单击按钮呢？

【问题讨论】：

那么你到底想要什么？

如果提交按钮被禁用，他们如何得到验证错误？

当您单击“添加员工”时，按钮会暂时禁用，但表单确实应该在字段上运行 HTML 验证。它不是

@ScottMarcus 是的，我看到了这个问题。隐藏按钮有效，但这并不是最佳实践。很高兴有建议:-)

我不明白如果表单已经提交，你为什么要验证。

【参考方案1】：

您可以关闭指针事件，而不是禁用按钮：

$("#submit_button").style.pointerEvents = "none";

或者更好的是，向按钮添加一个类，它会改变颜色，使其看起来被禁用（在其上放置不透明度）并添加 pointerEvents 属性。

#submit_button.disabled
  opacity:.5;
  pointerEvents:none;

【参考方案2】：

上面的@Raqha 提到了答案，但代码略有偏差。确实暂时关闭指针是要走的路。谢谢！

所以这段代码：

$('#submit_button').click(e => 
    $("#submit_button").addClass('disabled')
    console.log($('#' + e.target.id).parent('form').children('input'))
    setTimeout(() => 
        $("#submit_button").removeClass('disabled')
        console.log('UN-DISABLED')
    , 2000)
)

使用这个 CSS：

button.disabled 
    pointer-events: none;


button.enabled 
    pointer-events: all;

显然，您可以根据需要更改按钮文本或添加微调器，同时禁用时建议根据需要提交。感谢互联网偷窥?