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

如何在 HTML5 表单中查找哪个子元素无效

How to find which child element is invalid in an HTML5 form

html

javascript

validation

html5-validation