javascript - 表单的无效 eventListener

Question

我正在 try catch 表单的 invalid 事件，但它似乎没有发生？

https://codepen.io/MartinMuzatko/pen/VzWwxG?editors=1010

对于我的用例，我需要在表单上设置监听器(用于异步表单验证)。因此，将监听器附加到单个输入对我来说不是一个选项。

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

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

Answer 1

“无效”事件不是“冒泡”的。它在无效的特定输入元素上触发，不会冒泡到表单元素。您需要在输入元素上附加监听器。

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