Improve form validation error panel UI

RESOLVED WONTFIX

Status

()

Firefox
General
RESOLVED WONTFIX
8 years ago
8 years ago

People

(Reporter: mounir, Assigned: mounir)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Assignee)

Description

8 years ago
Created attachment 481485 [details]
Screenshot of current UI

We need a nicer error message when trying to submit an invalid form (available in nightlies/beta7+). A screenshot of the current UI is attached. This message is actually a <xul:panel>.

When bug 554937 will be fixed, I will fix bug 595432 (IOW, the panel will be an arrow panel).
(Assignee)

Comment 1

8 years ago
By the way, I think the color might be confusing considering it's very close to the tooltip color (which is a system color). Do we want to use the tooltip color instead?
This is a string change. Beta 7 will be string freeze. Why hasn't this been raised or discussed at the many, many development meetings at which we've asked for people with pending string work to give us a heads-up?
Whiteboard: [strings]
(Assignee)

Comment 3

8 years ago
(In reply to comment #2)
> This is a string change. Beta 7 will be string freeze. Why hasn't this been
> raised or discussed at the many, many development meetings at which we've asked
> for people with pending string work to give us a heads-up?

It's not a string change, just CSS tweaks. Sorry if my description was confusing.
Whiteboard: [strings]
(Assignee)

Comment 4

8 years ago
Blog post about Opera's UI change for form validation error message:
http://my.opera.com/ODIN/blog/html5-forms-error-reporting-with-wobbly-bubbles

Comment 5

8 years ago
Something, wich would be great especially on longer forms. It would be great, if the browser would smoothly scroll to the invalid element + some extra space (label is often above the element), if the invalid element isn't in view.

Btw. ui of the error UI is changeable:
http://jsfiddle.net/trixta/ucVXN/ (FF4 only)
http://jsfiddle.net/trixta/L4NDp/ (polyfilled/x-browser)
http://jsfiddle.net/trixta/qTV3g/ (polyfilled/x-browser + using some extensions to make it easier)
(Assignee)

Comment 6

8 years ago
(In reply to comment #5)
> Something, wich would be great especially on longer forms. It would be great,
> if the browser would smoothly scroll to the invalid element + some extra space
> (label is often above the element), if the invalid element isn't in view.
> 
> Btw. ui of the error UI is changeable:
> http://jsfiddle.net/trixta/ucVXN/ (FF4 only)
> http://jsfiddle.net/trixta/L4NDp/ (polyfilled/x-browser)
> http://jsfiddle.net/trixta/qTV3g/ (polyfilled/x-browser + using some extensions
> to make it easier)

This is planned, see bug 600154 but we are not sure this will be done for Firefox 4.

Comment 7

8 years ago
Styling the form elements directly might not be the best idea. It sure makes sense to put the error message right where the error occurred, but i can already hear web designers all over the world grind their teeth.

So what about using the same place where the "do you want to save this password?" message shows up? At the top of the window. It would have to be styled more noticeably than the mentioned gray bar, of course, but that way it wouldn't collide as much with the page's design, don't you think?

I kinda like the "scroll into view" idea btw. May collide with self-defined error messages, if they're placed somewhere else - effectively becoming hidden.

Comment 8

8 years ago
(In reply to comment #7)

> I kinda like the "scroll into view" idea btw. May collide with self-defined
> error messages, if they're placed somewhere else - effectively becoming hidden.

This is only about the defaul validation "tooltip/panel". The spec says, that at least the first error should be mentioned and - but I'm not sure - focused.

There is no colission problem. If a designer wants to change the look and feel, he can remove the default behavior by canceling the invalid event and implement a totally different error UI. But I'm sure, that there will be a lot confusion, about how to do this.

Simply go to http://jsfiddle.net/trixta/qTV3g/ and look with Opera and/or FF4beta7. Although, the validation tooltip is quite similiar, it has fully replaced the browser defaults tooltip.
(Assignee)

Comment 9

8 years ago
I'm wondering if we shouldn't mark this bug as WONTFIX given that the error panel is now using the default arrow panel style (except for GTK theme).
Summary: Make form validation error panel nicer → Improve form validation error panel UI
(Assignee)

Comment 10

8 years ago
The invalid form panel is now using the default arrow panel style in all platforms. Marking WONTFIX for consistency.
Assignee: nobody → mounir.lamouri
Status: NEW → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.