HTML5 required, open collapse and focus required element if empty

Question

I am trying to get the page to focus on an empty element, if its within a collapsed div it will then open that element and focus on the required field which was empty. I am usin

Answer 1

Add a listener to your inputs for them being invalid, then tell the parent container to open.

var inputs = document.querySelectorAll('form div input');

[].forEach.call(inputs, function(input) {
  input.addEventListener('invalid',function(e){
    input.parentNode.style.display = 'block'
  });
});

div {
  display: none;
}