602500 - Improve form validation error panel UI

Status: RESOLVED WONTFIX

(Firefox :: General, defect)

Description

[Mounir Lamouri (:mounir)]

Attachment: 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).

Comment 1

[Mounir Lamouri (:mounir)]

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?

Comment 2

[Mike Beltzner [:beltzner, not reading bugmail]]

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?

Comment 3

[Mounir Lamouri (:mounir)]

(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.

Comment 4

[Mounir Lamouri (:mounir)]

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

[Alexander Farkas]

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)

Comment 6

[Mounir Lamouri (:mounir)]

(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

[Dan]

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

[Alexander Farkas]

(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.

Comment 9

[Mounir Lamouri (:mounir)]

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).

Comment 10

[Mounir Lamouri (:mounir)]

The invalid form panel is now using the default arrow panel style in all platforms. Marking WONTFIX for consistency.