javascript - 防止双重提交并允许 "required"字段

Question

从一个需要电子邮件地址的简单表单开始:

<form action="NextPage.php" method="post">
    <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email">
    <button type="submit">Submit</button>
</form>

(出于故障排除目的，已删除标签和其他字段等非必要功能。)

前段时间，我遇到了双重提交的问题。我记得尝试过许多不同的解决方案，但我发现唯一有效的解决方案 here .

因此，我实现了该解决方案:

<form action="NextPage.php" method="post">
    <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email">
    <button type="submit" onclick="this.form.submit(); this.disabled = true;">Submit</button>
</form>

这是一个多月前的事了，到现在我都忘记了。 “required”属性现在不执行任何操作，因为 this.form.submit(); 似乎覆盖了 required。

这个问题的很多解决方案都需要大量的插件或额外的功能，但是有没有一个优雅的解决方案？

最优雅的解决方案可能是纯 html，但我希望我还需要 javascript。如果可能的话，我想避免下载库或安装插件。

例子:

• Solution using angularJS
• Solution using jQuery

我想要的是一个不会在双击时提交两次的表单，并且遵循 required 属性。理想情况下无需学习新的库或标记语言。如果需要，我不介意编写几个冗长的 javascript 函数。即使是重定向到下一页的页面也不会太不优雅。

(我也知道 PHP 和 SQL，但我认为它们都不会在这里提供帮助。)

这可能吗？

Answer 1

而不是禁用 onclick 中的按钮按钮的属性，在 onsubmit 中禁用它表单的属性。

您需要为提交按钮命名，然后您可以将其称为this.<name>。在onsubmit属性。或者你可以给它一个 ID，然后你可以使用 document.getElementById("<id>")引用它。

<form action="NextPage.php" method="post" onsubmit="this.submitButton.disabled = true;">
  <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email">
  <button type="submit" name="submitButton">Submit</button>
</form>

您的代码需要调用 this.form.submit() 的原因是因为单击禁用按钮不会触发默认表单提交。但是，如果您将禁用代码放在 onsubmit 中属性，它仅在表单提交过程开始后运行。