HTML5 input required, scroll to input with fixed navbar on submit

Question

When trying to submit a form with missing required fields, my browser (Chrome), displays a message mentionning there is a field missing, and if it\'s out of my screen, it sc

Answer 1

I had the exact same problem and resolved it using jquery with this bit of code:

var delay = 0;
var offset = 150;

document.addEventListener('invalid', function(e){
   $(e.target).addClass("invalid");
   $('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - offset }, delay);
}, true);
document.addEventListener('change', function(e){
   $(e.target).removeClass("invalid")
}, true);

Offset should be the height of your header and delay is how long you want it to take to scroll to the element.