觸發 html 表單提交就像您單擊按鈕一樣（但沒有按鈕）？

Question

如果您有一個<form>和一個<button type='submit'>並且您單擊提交按鈕，它將執行默認表單驗證，例如檢查是否需要<input> 。 它通常會說Please fill out this field.

但是，如果我通過$("form").submit()以編程方式提交表單，它會在不執行任何檢查的情況下提交它。

有沒有更簡單的方法來使用原生 JavaScript 執行默認表單驗證？ form元素上似乎只有checkValidity()返回true或false 。 如果我在input本身上調用相同的本機函數，它實際上並沒有做任何事情。

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

Answer 1

我認為這可能是您正在尋找的答案：

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/

Answer 2

對於還在苦苦掙扎的人：

您可以使用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

我希望它可以幫助您或給您一些想法。 :)