HTML5 Forms: Error Reporting With Wobbly Bubbles

On Wednesday night, at standards.next in Manchester, Patrick Lauke and I were glad to be able to demonstrate HTML5 Forms validation in Opera with a visually much more appealing method of reporting errors. It was appreciated by attendees and we received requests from people who couldn't attend to see a sneak peek.

As we've spoken at conferences over the last couple of years, we heard designers' complaints about the blinking form fields and red boxes with error messages (and felt the pain ourselves!) so worked with Emil in our Swedish office to make the out-of-the-box look and feel more acceptable.

Phase 1 is shown in the YouTube video below (there is a before and after comparison). Instead of red boxes with error messages, we now have a speech bubble with a movement to attract the eye. We call this the Wobbly Bubbles build (as "Wobbly Bubbles" is Patrick's nickname throughout Opera).

We've also reworked the error messages; for example, if you submit a blank required field, the wobbly bubble says "This is a required field" instead of the previous "You have to enter a value". ("Have to" as a phrasal verb that means "must" is very problematic for international speakers, as it's easily confused with "have" for possession and "have" as the auxiliary verb for perfect tenses.)

As yet, these bubbles are not author stylable (because there are no hooks in any CSS specification yet, although that's being worked on) so it's particularly important that the default implementation doesn't make your eyes bleed.

We have lots more on our wishlist for HTML5 forms error reporting, and this is just an experimental build. We can't say when it would be in a shipping browser or will ever ship in this format. But we're eager to hear your comments (you can comment anonymously below).