Question

我有一个表单，其中的输入具有必填属性。但是，我不希望表单正常提交，但是它使用ajax。因此，我将表单操作设置为required。但是，导致<form action="javascript:void(0)"> <input name="email" required> </form>`属性失效。

我该如何解决？

这是我的表格

nan

Answer 1

因此，使用表单上的Submit处理程序并取消默认操作。

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
}

请参见this和this

Answer 3

这样做可能会帮助您

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

Javascript必需属性无法与e.preventDefault一起使用

3 个答案: