Styling HTML5 Form Validation Errors

Warning This article was written over six months ago, and may contain outdated information.

Back in March I wrote about HTML5 Form val­i­da­tion and the prob­lem with the appear­ance of error mes­sages. I pro­posed a syn­tax for styling the error mes­sages, and short­ly after I pub­lished the post, I sub­mit­ted the pro­pos­al to the W3C via the www-style mail­ing list.

I’ll dis­cuss quick­ly the result of that sub­mis­sion, but first I should men­tion that I’ve since found out that the Google Chrome devel­op­ers have already imple­ment­ed their own syn­tax, and it’s not too far removed from what I pro­posed. Before I get to that, how­ev­er, allow me to gripe.

What the feed­back on my pro­pos­al would be, I have no idea — and may nev­er know. As I men­tioned, I sub­mit­ted it via the www-style list, but my emails were nev­er pub­lished. I was told that as a new user my mail would be held for approval, but that was six weeks ago. I emailed the list admin­is­tra­tor and tried to sub­mit it again, but nev­er got a reply.

I have to say that, as a devel­op­er try­ing to get involved in the stan­dards process — which is what the W3C claim they want — this was not a good expe­ri­ence for me. I had a seri­ous pro­pos­al which I want­ed to open up for dis­cus­sion, but was com­plete­ly unable to do so and met with a wall of silence. I’m not against there being a mod­er­a­tion and approval process, but only if there’s an even­tu­al result and some kind of com­mu­ni­ca­tion throughout.

OK, with the moan out of the way, I’ll talk about the Chrome val­i­da­tion error styling syn­tax. The error mes­sage, known as the ‘bub­ble’, is made of four div ele­ments which are acces­si­ble via four pseu­do-class­es, each of which applies to a dif­fer­ent div in the bubble:

::-webkit-validation-bubble {}
::-webkit-validation-bubble-arrow-clipper {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-message {}

The par­ent ele­ment is ::-webkit-validation-bubble, which sets the size and posi­tion of the bub­ble, and has two child ele­ments. The first child is ::-webkit-validation-bubble-arrow-clipper, which has its own child, ::-webkit-validation-bubble-arrow; these two set the styles of the tail of the bub­ble. The body of the bub­ble is the sec­ond child, ::-webkit-validation-bubble-message, which con­tains the text node with the error itself.

I’ve made a quick exam­ple which you can see in action on the HTML5 Forms demo — you’ll need to use Chrome to see it, and you can view the source to see the styles I’ve used. Below is an image com­par­i­son of the default mes­sage (top) and my styled ver­sion. Note: I took a lit­tle crit­i­cism for call­ing the default styles ‘ugly’ in my orig­i­nal post, and I don’t want to claim that mine is any bet­ter, because it’s real­ly not; it’s just dif­fer­ent, to act as an example.

Default (top) and styled validation error message

You can read a lit­tle more about this syn­tax on the WebKit wiki, and also see the default styles the error mes­sage uses. I’ve no idea if Fire­fox or Opera imple­ment their error mes­sages in the same way so don’t know if this is like­ly to become stan­dard, or will always remain a WebKit-only syn­tax. I have to say it’s not real­ly an ele­gant solu­tion, but it works.

15 comments on
“Styling HTML5 Form Validation Errors”

  1. Peter,

    I for one am quite con­cerned with the www-style “emails were nev­er pub­lished” prob­lem. Did you sign-up for the www-style mail­ing list before sending?

    I just read your orig­i­nal pro­pos­al http://www.broken-links.com/2011/03/28/html5-form-validation/ for the first time and frankly pre­fer the approach you’re tak­ing there.

    Please try sign­ing up for the www-style mail­ing list:

    mailto:www-style-request@w3.org?subject=subscribe

    and resend your email/proposal and feel free to CC me as well.

    Tan­tek Çelik
    edi­tor, CSS3 Basic User Inter­face module

  2. Thanks, Tan­tek, I’ll do that now. I’ve redact­ed your email, btw, to try to spare your spam servers a little.

  3. The prob­lem I would see with this is that it’s very explic­it­ly tied to the bub­ble that browsers have cur­rent­ly cho­sen for their styling. What hap­pens if, say on oth­er devices like mobile, browsers choose a com­plete­ly dif­fer­ent visu­al metaphor to show errors? Or even on desktop?

  4. @Patrick — Yes, their prop­er­ties are explic­it­ly tied to their imple­men­ta­tion and prob­a­bly not very trans­fer­able; I think they’re prob­a­bly only for inter­nal use and not intend­ed to be exposed to the pub­lic, tbh.

  5. It seems that Opera has an issue with val­i­da­tion bub­bles in that if you use @font-face to define the default font for your web­site, the val­i­da­tion bub­ble shows up but no text is shown. The only way to get text in the val­i­da­tion bub­ble is to set the default font to one which is installed on the local host.

  6. val­i­da­tion not work­ing with IE

  7. […] Styling HTML5 Form Val­i­da­tion Errors […]

  8. […] 8. Styling HTML5 Form Val­i­da­tion Errors […]

  9. […] Styling HTML5 Form Val­i­da­tion Errors […]

  10. Hi,

    Thank you !
    You can also add
    ::-webkit-validation-bubble-icon {}
    in your list of pseudo-elements.

    Here is an arti­cle : http://www.alsacreations.com/tuto/lire/1391-formulaire-html5-placeholder-required-pattern.html (with a demo at the end of document).

    regards

  11. […] error mes­sages are brows­er and OS spe­cif­ic, and hard to mod­i­fy (which I doc­u­ment­ed on my blog), but you can change the way the errors appear on the ele­ments them­selves with the new validation […]

  12. […] der Hin­weise und/oder Fehler­mel­dun­gen der HTM­L5-Vali­dierung browser­ab­hängig und im Moment nur ungenü­gend anpass­bar. So unter­schei­det sich die Darstel­lung in den ver­schiede­nen Browsern teil­weise drastisch. Zum […]

  13. […] к браузеру и от OS к OS, и с трудом поддаются модификации (что я задокументировал в своем блоге), но можно поменять индикацию ошибки на самом элементе […]

  14. […] a proza­tím ji nelze stan­dard­ně stylo­vat. Chrome má něk­teré vlast­ní pseudo–třídy, se který­mi to lze, Peter Gasston o tom nap­sal článek. Dále můžete stylo­vat inputy pomocí :required pseudo–třídy. Alter­na­tivně lze předefinovat […]

  15. […] آلية للقيام بذلك والتي يُمكن التعرف عليها بقراءة هذا المقال. يبقى التحكم في مظهر الحقل المعني برسالة الخطأ مُمكنا […]