javascript - html 表单 - `required` 属性未通过 onclick 确认触发

Question

我有一个带有输入字段的 html 表单，在提交之前需要一个值，为了实现这一点，我在 html5 中使用了 required 属性，它显示在下面的代码片段中，标题为 Form一个。

问题是我想在点击删除按钮后添加一条确认弹出消息——询问用户是否要继续。

我在下面显示的带有标题 Form Two 的代码段中完成了此操作，但问题是，当输入字段为空并提交时，所需属性未显示。

在触发所需方法之前提交表单。任何人有解决这个 html5 无能的想法吗？

谢谢

<h2>Form One </h2>

<form method="post" action="example.com" id="delete_page">

  Name : <input type="name" required><br>
  <input type="button" value="Cancel">
  <input type="submit" value="Delete">

</form>
<hr>
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page">

  Name : <input type="name" required><br>
  <input type="button" value="Cancel">
  <input type="submit" onclick="confirm('Are you sure you want to submit')" value="Delete">

</form>

Answer 1

尝试使用 onsubmit在你的 <form>而不是按钮。

<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page"
      onsubmit="return confirm('Are you sure you want to submit?')">

  Name : <input type="name" required><br>
  <input type="button" value="Cancel">
  <input type="submit" value="Delete">

</form>

浏览器表单验证仅在 submit 事件中启动。

如果用户选择“取消”弹出窗口，这也会阻止您提交表单。