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

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

Answer 2

Here's an EASY and FAST way.

$('input').on('invalid', function(e) {
        setTimeout(function(){
            $('html, body').animate({scrollTop: document.documentElement.scrollTop - 150 }, 0);
        }, 0);
});

Answer 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