事件“无效”是否只触发一次？

Question

我试图连接到 invalid 事件以进行数字输入（这是必需的），而 invalid 事件在加载页面时立即触发（因为所有单元格都是空的），如果填写输入字段并删除其内容或输入字母而不是数字，它不会重新触发。但我找不到任何迹象表明这将是它的行为。但同时我也找不到我的代码有问题。所以我想在继续寻找错误之前，我首先要问的是期望的行为是什么。

Answer 1

显然橡皮鸭很有帮助：

invalid 事件仅在表单提交上触发，而 css :invalid 样式在 input 上实时应用事件，而不是仅在 submission 事件之后。

If a form is submitted with an invalid value, the submittable elements are checked and, if an error is found, the invalid event will fire

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event

Answer 2

如文档中所述：

When a form is submitted, invalid events are fired at each form control that is invalid

因此，当提交表单时，任何不遵守其约束的输入都将触发 invalid 事件。

此处输入的是数字，最小值为1。设置为0并提交将触发invalid事件。

document.querySelector('input[type="number"]').addEventListener('invalid', () => {
  console.log('invalid')
})

<form action="#">
  <input type="number" min="1" value="0">
  <input type="submit">
</form>

事件“无效”是否只触发一次？

Does the event `invalid` only fire once?

javascript

events

dom-events