表单的无效事件监听器

Question

我正在尝试捕获invalid表单的事件，但它似乎没有发生？

https://codepen.io/MartinMuzatk​​o/pen/VzWwxG?editors=1010

对于我的用例，我需要在表单上安装监听器（用于异步表单验证）。因此，将侦听器附加到单个输入对我来说不是一个选择。

根据规范，invalid当某些输入无效时，表单应该触发一个事件。

https://www.w3.org/TR/html5/forms.html#client-side-form-validation

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