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