Take the 2-minute tour ×

I'm building web form where I'm using simple HTML5 validation.

<input type="text" required />

By default, when I click on the "SUBMIT" button browser HTML5 validation would kick in, scroll the page and focus on the empty required field. Problem is that browser would scroll up just enough to place the field inside viewport, at a very top of the screen. In some cases I might have absolute positioned elements at a top that would overlap the field.

I wonder if it's possible to scroll, let's say 100px more when validation kicks in, or even move the filed to the middle of the screen.

Note that I'm looking for simple JS or CSS solution that works with default HTML5 validation. I'm aware that I can achieve this if I implement custom validation script but I'm trying to stay lean.


share|improve this question
why not this $("#id").focus() –  Digital_at_heart Sep 17 '13 at 18:37
OPUS: That would do exactly the same –  Martijn Sep 17 '13 at 18:39
add comment

2 Answers

You could trigger the validation youself with checkValidity(), and if that returns false, scroll another 100px down (because checkValidity() allready pushes you to the element).

If you set the form to 'novalidate' and than onsubmit check the form, you have a better control over it.

share|improve this answer
Sounds interesting. I'll give it a try now. –  Klikerko Sep 17 '13 at 18:49
add comment

Have a look to this tutorial

There are a lot of examples.

share|improve this answer
add comment

Your Answer


