javascript - 自动 html 表单验证的属性是什么？

Question

当点击提交类型按钮时，如果输入无效，则会提示另一个输入(例如，不填写所需的表格)。但是，如果输入有效，它会执行其他操作，确定它走哪条路线的属性是什么。

Answer 1

您需要将一个名为 submit 的事件附加到表单元素，该元素将在所有输入有效时执行回调(函数)。

HTML:

<form>
  <div>
    <label for="username">Username</label>
  <input id="username" type="text" required placeholder="Username">
  </div>

  <div>
    <label for="email">Email</label>
  <input id="email" type="email" required placeholder="Email">
  </div>

  <button type="submit">Submit</button>
</form>

JavaScript:

const form = document.querySelector('form')

form.addEventListener('submit', function(event) {
  // This function will only get executed when there's no input errors or all inputs are valid.
  event.preventDefault()
  console.log('Form submitted without errors!')
})

链接: https://codepen.io/fenwil/pen/NWGPePJ?editors=1011