Back in March I wrote about HTML5 Form validation and the problem with the appearance of error messages. I proposed a syntax for styling the error messages, and shortly after I published the post, I submitted the proposal to the W3C via the www-style mailing list.
I’ll discuss quickly the result of that submission, but first I should mention that I’ve since found out that the Google Chrome developers have already implemented their own syntax, and it’s not too far removed from what I proposed. Before I get to that, however, allow me to gripe.
What the feedback on my proposal would be, I have no idea – and may never know. As I mentioned, I submitted it via the www-style list, but my emails were never published. 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 administrator and tried to submit it again, but never got a reply.
I have to say that, as a developer trying to get involved in the standards process – which is what the W3C claim they want – this was not a good experience for me. I had a serious proposal which I wanted to open up for discussion, but was completely unable to do so and met with a wall of silence. I’m not against there being a moderation and approval process, but only if there’s an eventual result and some kind of communication throughout.
OK, with the moan out of the way, I’ll talk about the Chrome validation error styling syntax. The error message, known as the ‘bubble’, is made of four div
elements which are accessible via four pseudo-classes, each of which applies to a different div
in the bubble:
::-webkit-validation-bubble {} ::-webkit-validation-bubble-arrow-clipper {} ::-webkit-validation-bubble-arrow {} ::-webkit-validation-bubble-message {}
The parent element is ::-webkit-validation-bubble
, which sets the size and position of the bubble, and has two child elements. 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 bubble. The body of the bubble is the second child, ::-webkit-validation-bubble-message
, which contains the text node with the error itself.
I’ve made a quick example 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 comparison of the default message (top) and my styled version. Note: I took a little criticism for calling the default styles ‘ugly’ in my original post, and I don’t want to claim that mine is any better, because it’s really not; it’s just different, to act as an example.
You can read a little more about this syntax on the WebKit wiki, and also see the default styles the error message uses. I’ve no idea if Firefox or Opera implement their error messages in the same way so don’t know if this is likely to become standard, or will always remain a WebKit-only syntax. I have to say it’s not really an elegant solution, but it works.
Peter,
I for one am quite concerned with the www-style “emails were never published” problem. Did you sign-up for the www-style mailing list before sending?
I just read your original proposal http://www.broken-links.com/2011/03/28/html5-form-validation/ for the first time and frankly prefer the approach you’re taking there.
Please try signing up for the www-style mailing list:
mailto:www-style-request@w3.org?subject=subscribe
and resend your email/proposal and feel free to CC me as well.
Tantek Çelik
editor, CSS3 Basic User Interface module
Tantek Çelik [June 16th, 2011, 15:04]
Thanks, Tantek, I’ll do that now. I’ve redacted your email, btw, to try to spare your spam servers a little.
Peter [June 16th, 2011, 15:15]
The problem I would see with this is that it’s very explicitly tied to the bubble that browsers have currently chosen for their styling. What happens if, say on other devices like mobile, browsers choose a completely different visual metaphor to show errors? Or even on desktop?
Patrick H. Lauke [June 16th, 2011, 22:36]
@Patrick – Yes, their properties are explicitly tied to their implementation and probably not very transferable; I think they’re probably only for internal use and not intended to be exposed to the public, tbh.
Peter [June 17th, 2011, 09:48]
It seems that Opera has an issue with validation bubbles in that if you use @font-face to define the default font for your website, the validation bubble shows up but no text is shown. The only way to get text in the validation bubble is to set the default font to one which is installed on the local host.
J Xuereb [June 22nd, 2011, 13:06]
validation not working with IE
Deepak Singh [July 12th, 2011, 12:37]
[…] Styling HTML5 Form Validation Errors […]
30 Helpful Tutorials How to Creating HTML5/CSS3 Forms | Pros Global TV [July 13th, 2011, 04:28]
[…] 8. Styling HTML5 Form Validation Errors […]
Great New Hot jQuery HTML5 With CSS3 Form Tutorials [July 24th, 2011, 11:15]
[…] Styling HTML5 Form Validation Errors […]
20 Awesome HTML5 Web Forms Tutorials [August 9th, 2011, 14:14]
Hi,
Thank you !
You can also add
::-webkit-validation-bubble-icon {}
in your list of pseudo-elements.
Here is an article : http://www.alsacreations.com/tuto/lire/1391-formulaire-html5-placeholder-required-pattern.html (with a demo at the end of document).
regards
Geoffrey [February 17th, 2012, 13:45]
[…] error messages are browser and OS specific, and hard to modify (which I documented on my blog), but you can change the way the errors appear on the elements themselves with the new validation […]
CSS3 Pseudo-Classes and HTML5 Forms | Testing themes [February 29th, 2012, 13:00]
[…] der Hinweise und/oder Fehlermeldungen der HTML5-Validierung browserabhängig und im Moment nur ungenügend anpassbar. So unterscheidet sich die Darstellung in den verschiedenen Browsern teilweise drastisch. Zum […]
Webkrauts » Formvollendet (Teil 2) [May 22nd, 2012, 10:01]
[…] к браузеру и от OS к OS, и с трудом поддаются модификации (что я задокументировал в своем блоге), но можно поменять индикацию ошибки на самом элементе […]
Псевдоклассы CSS3 и формы в HTML5 [December 5th, 2012, 21:03]
[…] a prozatím ji nelze standardně stylovat. Chrome má některé vlastní pseudo–třídy, se kterými to lze, Peter Gasston o tom napsal článek. Dále můžete stylovat inputy pomocí :required pseudo–třídy. Alternativně lze předefinovat […]
Formuláře v HTML5 a nové atributy | IT mag - novinky z IT [March 25th, 2013, 12:58]
[…] آلية للقيام بذلك والتي يُمكن التعرف عليها بقراءة هذا المقال. يبقى التحكم في مظهر الحقل المعني برسالة الخطأ مُمكنا […]
تعرف على نماذج HTML5 وخصائصها الجديدة | مدونة دروس الويب [June 2nd, 2013, 10:00]