如何在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;")
    }
}