javascript - Javascript 必需属性不适用于 e.preventDefault

Question

我有一个表单，其输入具有所需的属性。但是，我不希望表单正常提交，但它使用 ajax。因此，我将表单操作设置为javascript:void(0)。但是这样做会使required属性无用。它没有不工作

我该如何解决？

这是我的表格

<form action="javascript:void(0)"> <input name="email" required> </form>`

Answer 1

所以使用表单上的提交处理程序并取消默认操作。

document.querySelector("#myForm").addEventListener("submit", function (evt) {
  evt.preventDefault();
  // do you ajax submission here
  console.log('submitted')
})

<form id="myForm">
  <label for="email">email:</label> <input id="email" name="email" type="email" required>
  <button>Submit</button>
</form>

Answer 2

如果您自己提交，您可以使用以下方式检查表单的有效性

if (form.checkValidity()) {
  // submit via XHR etc...
} else {
  // the form is not valid
}

看到这个和这个

Answer 3

这样做可以帮助你

<form name="myForm">
  <input name="email" required>
  <input type="submit" value="submit">
</form>
<script>
  document.myForm.onsubmit = e => {
    e.preventDefault();
  }
</script>