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 scrolls up to it.

My problem is that I have a 50px fixed header in my webpage, and as a result, the input field is hidden, and the message seems to come out of nowhere:

Input field hidden

Instead of

Input field shown

Is there a way around this?

I tried both applying the 50px margin to <html> and to <body>

Cheers

EDIT

Here's a fiddle of the problem: http://jsfiddle.net/LL5S6/1/

Had the exact same problem, shame nobody came up with a fix for this. — tirdadc, Jul 28 '14 at 18:23
I think we need to consider the `required="required"` html attribute as something unstable at the moment... It is tricky to use, not highly compatible, and still has side effects like this one... — Augustin Riedinger, Aug 13 '14 at 13:19
using Chrome Version 37.0.2062.120 it works like you want. have you tried already? — dippas, Sep 17 '14 at 09:27

score 42 · Answer 1 · answered May 14 '15 at 21:49

42

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.

answered May 14 '15 at 21:49

T.J. Moats

533
1
5
8

Exactly what I needed! But be careful: If you use a delay > 0, then the browser message "Please fill out this field" will disappear as soon as scrolling starts (so it's only visible for a few milliseconds) – techfly Jun 12 '17 at 14:08
1

IMO this solution is wrong, as the 'invalid' event does not bubble according to https://developer.mozilla.org/en-US/docs/Web/Events/invalid – M Klein Apr 05 '18 at 22:46

A1rPun · Answer 2 · 2016-09-22T22:37:29.163

26

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

edited Sep 22 '16 at 22:37

answered Sep 17 '14 at 09:41

A1rPun

16,287
7
57
90

Thanks @HenryW I will add it to the answer. – A1rPun Sep 17 '14 at 10:03
Pretty nice! Though a browser debug would be even better! – Augustin Riedinger Sep 17 '14 at 15:30
`scrollIntoView` does not work with fix positioned headers at the top of the page. – feeela Feb 08 '16 at 12:33
@feeela It solved the problem for OP which had a fixed positioned header. Can you please specify what *does not work*? – A1rPun Feb 08 '16 at 15:20
This doesn't work if there are multiple invalid inputs because it will scroll to the last invalid input and then the browser will scroll back to the first at the top and hidden by the fixed navbar. There should be a way to execute scrollIntoView only for the first invalid input but I don't know how. – Christian Toffolo Nov 29 '18 at 13:30

ausi · Accepted Answer · 2020-05-26T05:53:13.637

21

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

edited May 26 '20 at 05:53

answered May 20 '20 at 12:49

ausi

7,253
2
31
48

2

This is amazing! Could you update your answer with compatibility https://caniuse.com/#feat=mdn-css_properties_scroll-padding-top and I'll accept it? – Augustin Riedinger May 25 '20 at 21:26
Also of interest is `scroll-margin` . Unlike `scroll-padding`, you wouldn't use this on the `html` element, you would use this on the `` field instead. – Flimm Jul 07 '23 at 21:39

Alf Eaton · Answer 4 · 2016-02-10T12:47:06.593

When there are several invalid inputs in the form, you only want to scroll to the first of them:

var form = $('#your-form')
var navbar = $('#your-fixed-navbar')

// listen for `invalid` events on all form inputs
form.find(':input').on('invalid', function (event) {
    var input = $(this)

    // the first invalid element in the form
    var first = form.find(':invalid').first()

    // only handle if this is the first invalid input
    if (input[0] === first[0]) {
        // height of the nav bar plus some padding
        var navbarHeight = navbar.height() + 50

        // the position to scroll to (accounting for the navbar)
        var elementOffset = input.offset().top - navbarHeight

        // the current scroll position (accounting for the navbar)
        var pageOffset = window.pageYOffset - navbarHeight

        // don't scroll if the element is already in view
        if (elementOffset > pageOffset && elementOffset < pageOffset + window.innerHeight) {
            return true
        }

        // note: avoid using animate, as it prevents the validation message displaying correctly
        $('html,body').scrollTop(elementOffset)
    }
})

JSFiddle

This answer worked best for me... I had a very long form, and without worrying about 'first error only', it would always scroll too far down. — Mir, Sep 05 '17 at 18:00
Work fine here too, after having added the navbarHeight in this math: if ( ( elementOffset > ( pageOffset + navbarHeight ) ) && ( elementOffset < ( pageOffset + window.innerHeight ) ) ) { — Mexicanoon, Feb 07 '18 at 01:30
Mind that form.find(':invalid').first() will return a fieldset if your input is within a fieldset. — M Klein, Apr 05 '18 at 23:00

score 5 · Answer 5 · edited May 23 '17 at 11:54

5

ok, i did a dirty test with a code snippet i found here on SO

As it is a code from someone else, i just alter it to scroll to the element that had a missing input requirement. I do not want any credit for it, and it maybe is not even what you have in mind, you or someone else could use it as a reference.

The goal was to get the id of the forgotten/wrong input element:

            var myelement = input.id;
            var el = document.getElementById(myelement);
            el.scrollIntoView(false);

Please keep in mind that this fiddle only works for your posted fiddle above, it not handles multiple forgotten or wrong input fields.I only wanted to show an alternative.

----->jSFiddle

edited May 23 '17 at 11:54

Community

1
1

answered Sep 17 '14 at 09:28

HenryW

3,551
1
23
23

You just solved a puzzle by putting the right pieces together ;) I've came up with an even shorter solution which I will post in a second. – A1rPun Sep 17 '14 at 09:37
See [this fiddle](http://jsfiddle.net/LL5S6/39/). Because you specify false to `scrollIntoView` the element is at the bottom of the page. So the solution is not perfect (mine isn't too) – A1rPun Sep 17 '14 at 09:48
i think needs to have false, if true, it not work. i used [THIS](https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView) as my reference to give the answer – HenryW Sep 17 '14 at 09:56
if can tweak the `alignWithTop` by adding the `margin-top: 50px;` or getting the fields position, both codes are good to go :) , it is up to the OP to fine-tune i think. – HenryW Sep 17 '14 at 10:07
My first solution was getting the [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect) and check if the top was less than the bottom of the header.. and then scroll the window accordingly. I think scrollIntoView is acceptable ;) – A1rPun Sep 17 '14 at 10:11

kibus90 · Answer 6 · 2018-08-30T17:12:28.370

I tried to use the way of T.J. Moats, but it did not work as needed, because I often came back to the field, which was incorrect first.

So, I made it:

var navhei = $('header').height();
var navheix = navhei + 30;
document.addEventListener('invalid', function(e){
$(e.target).addClass("invalid");
   $('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - navheix }, 0);
 
setTimeout(function() {
$('.invalid').removeClass('invalid');
},0300);
}, true);

body {
    margin: 0;
    margin-top: 50px;
    text-align: center;
}

header {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #CCCCCC;
    text-align:center;
    top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<header>This is the header</header>
<div>
<form action="">
<br>
    <input id="text" type="text" required="required" /><br><br>
    <input id="text" type="text" required="required" /><br><br><br><br>
    <input id="text" type="text" required="required" /><br><br>
    <input id="text" type="text" required="required" /><br><br><br><br>
    <input id="text" type="text" required="required" /><br><br><br><br><br><br>
    <input id="text" type="text" required="required" /><br><br>
        <p>Click send (at the bottom of the page), without filling the input field.</p><br><br><br><br><br><br>
        <input id="text" type="text" required="required" /><br><br>
    <input type="submit" id="btnSubmit" />
    </form>
</div>

I hope it will be helpfull for people :)

score 1 · Answer 7 · edited Oct 31 '18 at 14:17

1

You can use oninvalid event attribute of HTML5 and in your script's tag write a function for redirecting it.

Here is the example:

<input type="text" required oninvalid="scroll_to_validator(this)">

<script>
    function scroll_to_validator(input)
        {
        input.focus(); 
        }
</script>

And on clicking on your submit button it will scroll to the invalid field.

For radio button please add only on one radio with same name
Here is the example (jsfiddle)

edited Oct 31 '18 at 14:17

schlebe

3,387
5
37
50

answered Oct 31 '18 at 13:22

Abhilash Sharma

103
1
2
8

Hello Abhilash. I see that you are a new user. For your information, I have formatted your code using {} for source code. This is better than using ` characters to highlight text and using a lot of
to simulate new-line. – schlebe Oct 31 '18 at 13:50

score 0 · Answer 8 · answered Nov 06 '13 at 14:38

0

Two solutions:

One: apply padding to the body -->
```
body {
 padding-top:50px;
}
```
Two : apply margin to the main container -->
```
 #content {
   margin-top:50px;
 }
```

answered Nov 06 '13 at 14:38

DaniP

37,813
8
65
74

apparently you can't solve this .. it's a problem with the function of the send button who leads the page right to the input field. like an inside reference. – DaniP Nov 06 '13 at 18:00
Couldn't you add a hidden element 50px below the text bar and make the send buttpn lead on there? – cbr Nov 06 '13 at 20:11
1

The problem here is you can't modfify the function ... is html5 or can you? – DaniP Nov 06 '13 at 20:43
2

Funny thing is that (with Chrome), when you change focus with tab key, it scrolls correctly (respecting the 50px offset), whereas when scrolling on submit, it doesn't. Feels buggy... – Augustin Riedinger Nov 07 '13 at 15:10

score -1 · Answer 9 · answered Jun 05 '18 at 15:29

-1

Here's an EASY and FAST way.

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

answered Jun 05 '18 at 15:29

Matthew Lee

1
2

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

9 Answers9

jsfiddle

Linked

Related