触发 html 表单提交，就像您单击按钮（但没有按钮）一样？答案

【问题标题】：Trigger html form submit as if you clicked on button (but without a button)?触发 html 表单提交，就像您单击按钮（但没有按钮）一样？
【发布时间】：2021-01-15 16:44:36
【问题描述】：

如果您有一个<form> 和一个<button type='submit'>，并且您单击提交按钮，它将执行默认的表单验证，例如检查是否需要<input>。通常会说Please fill out this field.

但是，例如，如果我通过$("form").submit() 以编程方式提交表单，它将在不执行任何检查的情况下提交。

有没有更简单的方法来使用原生 JavaScript 执行默认表单验证？ form 元素上似乎只有 checkValidity()，它返回 true 或 false。如果我在 input 本身上调用相同的本机函数，它实际上并没有做任何事情。

这是我的意思的演示代码： http://jsfiddle.net/totszwai/yb7arnda/

【问题讨论】：

标签： javascript html forms validation

【解决方案1】：

对于那些仍在苦苦挣扎的人：

您可以使用Constraint validation API - https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation

<div id="app">
  <form>
    <input type="text" required placeholder="name">
    <input type="text" required placeholder="email">
  </form>
  <button id="save">Submit</button>
</div>

const form = document.querySelector("form");
document.getElementById("save").addEventListener("click", e => {
  e.preventDefault();
  if (form.checkValidity()) {
    console.log("submit ...");
  } else {
    form.reportValidity();
  }
});

在这里查看和玩：https://stackblitz.com/edit/js-t1vhdn?file=index.js

我希望它对您有所帮助或给您一些想法。 :)

【讨论】：

LOL 5 年后。 XD 但是，是的，我想在点击时连接一个事件监听器会起作用。
:D LOL - 是的 - 我是一只乌龟。无论如何，我使用了按钮和click 事件，但代码实际上可以在任何事件中使用 - 你需要的是表单引用，这样你就可以check 和report ;)

【解决方案2】：

我认为这可能是您正在寻找的答案：

JavaScript：

document
.getElementById('button')
.addEventListener("click",function(e) {
     document.getElementById('myForm').validate();
});

HTML：

<form  id="myForm" >
First name: <input type="text" name="FirstName"  required><br>
Last name: <input type="text" name="LastName" required><br>
<button id="button">Trigger Form Submit</button>
</form>

演示：http://jsfiddle.net/2ahLcd4d/2/

【讨论】：

OP 没有要求 jQuery。
@NotoriousPet0 从 jQuery 更改为 JavaScript。
如果我的表单中没有按钮怎么办？（这就是我问这个问题的原因）你是说我们不能单独触发按钮执行的行为吗？
@codenamezero 每当您要提交表单时，只需执行此 document.getElementById('#myForm').validate();
是的，但我总是收到TypeError: $(…).validate is not a function。在我提出关于 stackoverflow 的问题之前，我已经搜索并尝试了几个潜在的解决方案。似乎本机函数只有来自form 元素的checkValidity，没有别的。我认为validate 是一个 jQuery 插件。