When submitting an invalid form, scroll to the first invalid element instead of jumping (with focus)

Assigned to



9 years ago
6 years ago


(Reporter: mounir, Assigned: mounir)


Dependency tree / graph

Firefox Tracking Flags

(blocking2.0 .x+, status2.0 wontfix)


(Whiteboard: [passed-try][needs-review])


(3 attachments, 1 obsolete attachment)



9 years ago
When an invalid form is submitted, the first invalid element is focused. For the moment, .focus() is directly call which make the focus jumping. It would be better to have the page scrolling to the invalid element so it would be clear to the users that they did not move to a new page.

Comment 1

9 years ago
Posted patch WIP Patch (obsolete) — Splinter Review
This is a WIP patch. I will try to tweak the animation speed a bit and check edge cases + write tests.

Comment 2

9 years ago
Posted patch Patch v1Splinter Review
So, the idea is to have the viewport moving to the invalid element instead of jumping to it so the user will not think the form has been submitted or a new page has been loaded.

Limi, I'm going to push that to try so you will be able to test.
Assignee: nobody → mounir.lamouri
Attachment #492364 - Attachment is obsolete: true
Attachment #493258 - Flags: ui-review?(limi)
Attachment #493258 - Flags: review?(dao)
No tryserver builds yet :(

(also, a link to a test page would be great, I'm sure I can find one online, but I'm also sure you have one handy ;)

Comment 5

9 years ago
(In reply to comment #4)
> No tryserver builds yet :(

I think it has been deleted. I thought it was saved for 14 days :-/
I'm going to push another one.
> (also, a link to a test page would be great, I'm sure I can find one online,
> but I'm also sure you have one handy ;)

Indeed, I should have attached one.

Comment 7

9 years ago
Posted file Testcase
There are 4 input fields in the page, all required. When you click on 'submit', the field on top will be focused, fill it. Then the field on the bottom, the left and finally the right one.

The screen shouldn't move for the first field then it should move for the two next ones. The last one should make the screen move a little bit to make it more visible.

This has been tested with a window of this size (it will probably behave differently depending of the size of the screen given that elements are placed absolutely):
width/height: 942/751


9 years ago
Whiteboard: [passed-try][needs-review]
blocking2.0: --- → .x
status2.0: --- → wontfix

Comment 9

9 years ago
Posted file Testcase
We shouldn't scroll so that invalid input is on the top of window.

Comment 10

9 years ago
Of course I didn't mean that we shouldn't scroll at all, but there should be some space left above the invalid input. Labels above the inputs are very common case, fixed menu is maybe not so often used, but also happens


9 years ago
Depends on: 620150


9 years ago
No longer depends on: 620150
Comment on attachment 493258 [details] [diff] [review]
Patch v1

I don't think we should take large chunks of chrome code messing with content any longer. Can this be written as a content script using the message manager?
Attachment #493258 - Flags: review?(dao) → review-
You need to log in before you can comment on or make changes to this bug.