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

Solution 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.

Solution 2:

The only way I found is adding an 'override' to the invalid handler. To implement this for every input in your form you can do something like this.

var elements = document.querySelectorAll('input,select,textarea');
var invalidListener = function(){ this.scrollIntoView(false); };

for(var i = elements.length; i--;)
    elements[i].addEventListener('invalid', invalidListener);

This requires HTML5 and this is tested on IE11, Chrome and Firefox.
Credits to @HenryW for finding that scrollIntoView works like expected.

Note that the false parameter for scrollIntoView aligns the input with the bottom, so if you have a large form it may be aligned with the bottom of the page.

jsfiddle

Solution 3:

In modern browsers there is a new CSS property for that use case:

html {
    scroll-padding-top: 50px;
}

Your JSFiddle updated: http://jsfiddle.net/5o10ydbk/

Browser Support for scroll-padding: https://caniuse.com/#search=scroll-padding