Closed Bug 602500 Opened 14 years ago Closed 14 years ago

Improve form validation error panel UI

Categories

(Firefox :: General, defect)

defect
Not set
normal

Tracking

()

RESOLVED WONTFIX

People

(Reporter: mounir, Assigned: mounir)

References

Details

Attachments

(1 file)

Attached image Screenshot of current UI (deleted) —
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).
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]
(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]
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
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)
(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.
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.
(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.
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
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
Closed: 14 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: