HTML5フォームで無効な子要素を見つける方法

Question

html5自動フォーム検証を使用して、フォーム内のどの子要素が無効であるかを見つける方法はありますか？

私はcheckValidity（）メソッドを呼び出すことで、要素ごとにチェックすることができます。私が求めているのは、もし短い方法があれば。例えば

、

var contactForm = document.getElementById('contact-form'); 
if (contactForm.checkValidity() == false) { 
    // something like contactForm.getInvalidChildren() and apply 
    // different style and error message based on the child type 
} 

Answer 1

は、私は私の要件を満たすthis method in MDNを見つけました。しかし、これを行う最良の方法であるかどうかはわかりません。

var contactForm = document.getElementById('contact-form'); 
if (contactForm.checkValidity() == false) { 
    var list = contactForm.querySelectorAll(':invalid'); 
    for (var item of list) { 
     item.setAttribute("style", "background-color: red;") 
    } 
}