表单的事件监听器无效。

Question

我试图捕获表单的invalid事件，但似乎没有发生？对于我的用例，我需要在表单上添加侦听器（用于异步表单验证）。因此，将侦听器附加到单个输入不是我的选择。根据规范，当一些输入无效时，表单应该触发一个invalid事件。

- Martin Muzatko

Answer 1

'invalid' 事件不会被“冒泡”。它将在特定的无效输入元素上触发，而不会向上传递到表单元素。 您需要在输入元素上附加侦听器。

var input = document.querySelector('form input')

input.addEventListener('invalid', (e)=>{
    console.log('invalid')
});

更新的笔： https://codepen.io/theLufenk/pen/WEONBw?editors=1010

如果你想在表单层面捕获事件，你将不得不使用事件捕获。

var form = document.querySelector('form')

form.addEventListener('invalid', (e)=>{
    console.log('invalid')
},true)

更新笔： https://codepen.io/theLufenk/pen/Ojgmxz?editors=1011

- Devesh Sati

---

那个规范的这部分是什么意思，当他们说“当表单被提交时，无效事件会在每个无效的表单控件上触发，然后在表单元素本身上触发” invalid事件何时会在表单本身中触发？ - Martin Muzatko

这不是一个冒泡事件。但是，您可以使用“捕获”来监听它。请查看我的更新答案。 - Devesh Sati

很遗憾，表单本身没有无效事件：https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement#Events。因此，在onsubmit方面，表单上没有单独的oninvalid事件，但是对于表单中的每个无效输入元素都有多个事件。解决方案可以使用防抖函数来获取一个事件。 - RiZKiT