フォームの無効なイベントリスナー

Question

フォームのinvalidイベントをキャッチしようとしていますが、それは起こりそうにありませんか？私のユースケースについては

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

、私は（非同期フォーム検証のための）フォーム上のリスナーを持っている必要があります。だから、個々の入力にリスナーを付けることは私の選択肢ではありません。

仕様によると、フォームは入力の一部が無効なときにinvalidイベントを発生させるはずです。

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

Answer 1

'無効' イベントは、 "バブリング" されていません。これは無効な特定の入力要素で発生し、フォーム要素までバブルしません。 input要素にリスナーを付ける必要があります。

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