{"id":4898,"date":"2012-11-05T21:07:25","date_gmt":"2012-11-06T01:07:25","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=4898"},"modified":"2012-11-10T16:11:31","modified_gmt":"2012-11-10T20:11:31","slug":"css3-pseudo-classes-and-html5-forms-their-limitations-and-a-possible-solution","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2012\/11\/05\/css3-pseudo-classes-and-html5-forms-their-limitations-and-a-possible-solution\/","title":{"rendered":"CSS3 Pseudo-Classes and HTML5 Forms: Their Limitations and a Possible Solution"},"content":{"rendered":"<div class=\"importantNotes\">\n<h3>Notes:<\/h3>\n<ul>\n<li><strong>Update: November 10, 2012:<\/strong> I found out via a <a href=\"https:\/\/twitter.com\/brucel\/status\/266474771737370625\">this tweet<\/a> that the CSS Selectors 4 has <a href=\"http:\/\/dev.w3.org\/csswg\/selectors4\/#user-error-pseudo\">a (draft) pseudo-class for <code>:user-error<\/code><\/a> which may address the issues discussed here with way less CSS code.  I may be implementing an experimental polyfill for <code>:user-error<\/code> in a future version of HTML5Forms.js.<\/li>\n<li>For more information about HTML5 forms, take a look at my previous articles, <a href=\"https:\/\/www.useragentman.com\/blog\/2010\/07\/27\/creating-cross-browser-html5-forms-now-using-modernizr-webforms2-and-html5widgets-2\/\">Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Forms<\/a> and <a href=\"https:\/\/www.useragentman.com\/blog\/2012\/05\/17\/cross-browser-styling-of-html5-forms-even-in-older-browsers\/\">Cross Browser Styling of HTML5 Forms \u2014 Even In Older Browsers<\/a>.<\/li>\n<\/ul>\n<\/div>\n<p><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2012\/11\/form.png\"><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2012\/11\/form.png\" alt=\"\" title=\"form\" class=\"alignleft size-full wp-image-5579\" \/><\/a>I have been playing around with HTML5 Forms for a while now, and have used it in production in a variety of projects.  One of my favorite parts of the spec is the use of CSS3 pseudo-classes to show the validation state of the form fields to the user. I believe these validation hints make a better user experience and makes the process of filling out the form less frustrating.  <strong>In my humble opinion, however, I think there are some shortcomings in the existing psuedo-classes that produce these validation hints<\/strong>, and would like to start a discussion for a possible solution that could be easily added to the CSS3 UI specification.<\/p>\n<h2>The &#8220;Problem&#8221;<\/h2>\n<p>If you look at the form below, you will see that:<\/p>\n<ul>\n<li>if a form element is mandatory, a star appears after the field label<\/li>\n<li>if it has an invalid value, a red X appears in the background<\/li>\n<li>if it has a valid value, a greed tick appears in it&#8217;s background<\/li>\n<\/ul>\n<form action=\"https:\/\/www.useragentman.com\/testForm.php\" id=\"test1\" class=\"standard\" data-webforms2-force-js-validation=\"true\">\n<table class=\"formTable\">\n<tr>\n<th>Name: <\/th>\n<td>\n<input type=\"text\" name=\"name\" value=\"\" required=\"required\" \/><\/p>\n<div class=\"description\"><\/div>\n<\/td>\n<\/tr>\n<tr>\n<th>Phone: <\/th>\n<td>\n<input type=\"tel\" name=\"phone\" required=\"required\" value=\"\" pattern=\"[0-9]{3}-?[0-9]{3}-?[0-9]{4}\" placeholder=\"e.g. 416-555-1234\" data-errormessage=\"The phone number must be in the following format: 555-555-5555.\"\/><\/p>\n<div class=\"description\"><\/div>\n<\/td>\n<\/tr>\n<tr>\n<th>Email: <\/th>\n<td>\n<input type=\"email\" name=\"company\" required=\"required\" value=\"\"  \/><\/p>\n<div class=\"description\"><\/div>\n<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>\n<input type=\"submit\" value=\"Submit\"\/><\/td>\n<\/tr>\n<\/table>\n<\/form>\n<p>In order to produce these effects, we use the CSS3 <code>:required<\/code>, <code>:valid<\/code>, <code>:invalid<\/code> and <code>:focus<\/code> pseudo-classes (if you are not familiar with them, you may want to read my previous article  <a href=\"\/blog\/2012\/05\/17\/cross-browser-styling-of-html5-forms-even-in-older-browsers\/\">Cross Browser Styling of HTML5 Forms \u2014 Even In Older Browsers<\/a> before you continue).  However, after using them on a few projects, I keep hearing from users and clients that it is <strong>confusing for focused form elements to have red x&#8217;s next to them if they have not even been filled in yet, unless this element has lost focus<\/strong>.   Also, it would be <strong>great if the user could see all the invalid form fields at once if a form submission has been attempted.<\/strong>  Unfortunately, the way the HTML5 psuedo-classes are set up today, it is impossible to implement these use-cases.<\/p>\n<h2>The &#8220;Solution&#8221; (For the Time Being)<\/h2>\n<p>In order to work around these issues (and after an interesting discussion with my friend and colleague <a href=\"https:\/\/twitter.com\/iDVB\">Dan Van Brunt<\/a>, I added the above functionality into my HTML5 Forms polyfill, <code>html5Forms.js<\/code>.  This is implemented using three special classes:<\/p>\n<ul>\n<li><code>.wf2_isBlank<\/code>, <code>.wf2_notBlank<\/code> &#8211; these classes are applied to form field when a form element is blank\/not blank repectively.<\/li>\n<li><code>.wf2_lostFocus<\/code> -this class is applied to a form element when a form field loses focus.<\/li>\n<li><code>.wf2_submitAttempted<\/code> &#8211; this class is applied to a <code>&lt;form&gt;<\/code> tag when a form submission is attempted.<\/li>\n<\/ul>\n\r\n<form class=\"experiment\" action=\"https:\/\/www.useragentman.com\/testForm.php\" id=\"test1\" class=\"testValidity\" data-webforms2-force-js-validation=\"true\">\r\n<table class=\"formTable\">\r\n<tr>\r\n<th>Name: <\/th>\r\n<td>\r\n<input type=\"text\" name=\"name\" value=\"\" required=\"required\" \/><span class=\"validationMarker\">&nbsp;<\/span>\r\n<div class=\"description\"><\/div>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<th>Phone: <\/th>\r\n<td>\r\n<input type=\"tel\" name=\"phone\" required=\"required\" value=\"\" pattern=\"[0-9]{3}-?[0-9]{3}-?[0-9]{4}\" placeholder=\"e.g. 416-555-1234\" data-errormessage=\"The phone number must be in the following format: 555-555-5555.\"\/><span class=\"validationMarker\">&nbsp;<\/span>\r\n<div class=\"description\"><\/div>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<th>Email: <\/th>\r\n<td>\r\n<input type=\"email\" name=\"company\" required=\"required\" value=\"\"  \/><span class=\"validationMarker\">&nbsp;<\/span>\r\n<div class=\"description\"><\/div>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><\/td>\r\n<td>\r\n<input type=\"submit\" value=\"Submit\"\/><\/td>\r\n<\/tr>\r\n<\/table>\r\n<\/form>\r\n<p>These classes exist when html5Forms.js is included in your document.  For those of you not familiar with this library, html5Forms.js includes a modified version of Weston Ruter&#8217;s webforms2.js polyfill that is only loaded into a document if the browser doesn&#8217;t support HTML5 Forms natively.  These classes, however, will be applied to the document whether or not the polyfill is loaded, so even if the browser is using a native implementation of HTML5 Forms, the browser will still use these classes.<\/p>\n<p><a class=\"exampleLink\" href=\"https:\/\/github.com\/zoltan-dulac\/html5Forms.js\">Download the latest version of html5Forms.js from github in order to use this functionality.<\/a><\/p>\n<h2>The &#8220;Solution&#8221; (For the Long Term)<\/h2>\n<p>I added this functionality to html5Forms.js as a proof of concept to show how this improves the usability of the HTML5 Forms module.  I believe it would be nice to have these classes be converted into pseudo-classes (i.e. <code>:isBlank<\/code>, <code>:notBlank<\/code>, <code>:lostFocus<\/code>, and <code>:submitAttempted<\/code>) and have included in CSS3, if possible.  To that end, I have submitted <a href=\"https:\/\/www.useragentman.com\/tests\/html5Forms.beta\/tests\/html5Forms\/validityStyling-experimental.html\">a simplified &#8220;clean-room&#8221; page with the example above<\/a> (no IE support to make the CSS simpler to follow) and submitted <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/www-style\/2012Jul\/0014.html\">a small blurb about these proposed pseudo-classes to the W3C&#8217;s www-style mailing list<\/a>.  I don&#8217;t know if it will go anywhere (I sent this out in July and didn&#8217;t hear anything back about it), but what do you think?  If you are front-end developer and believe this kind of functionality would be useful, <em>even if you think there is a better way to implement them,<\/em> please add yourself to the list and reply to the <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/www-style\/2012Jul\/0014.html\">thread on this subject<\/a>, or submit your opinion in the comment form below.  <strong>If you passionately disagree, I would love to know why.<\/strong>  I think this discussion is worth having now while HTML5 Forms implementations are in their infancy and currently not fully implemented in any web browser. <\/p>\n<h2>Acknowledgements<\/h2>\n<p>Image above includes work from <a href=\"http:\/\/www.flickr.com\/photos\/sali-design\/6509259561\/sizes\/l\/in\/photostream\/\">SALi-Design<\/a> and uses the <a href=\"http:\/\/www.fontsquirrel.com\/fonts\/skyhook-mono\">Skyhook Mono<\/a> font by <a href=\"http:\/\/www.fontomtype.de\">FontomType<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2012\/11\/form-thumb.png\" \/>I have been playing around with HTML5 Forms for a while now, and one of my favorite parts of the HTML5 Forms spec is the use of CSS3 pseudo-classes to show the validation state of the form fields to the user.  I believe these validation hints make a better user experience and makes the process of filling out the form less frustrating.  <strong>However, I think there are some shortcomings in the existing psuedo-classes that produce these validation hints.<\/strong>  I hope that this article will start a discussion for a possible solution that could be easily added to the CSS3 UI specification.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,145,35,146,147,1],"tags":[],"class_list":["post-4898","post","type-post","status-publish","format-standard","hentry","category-css3","category-forms-html5","category-html5","category-psuedo-classes","category-standard-proposal","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=4898"}],"version-history":[{"count":49,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4898\/revisions"}],"predecessor-version":[{"id":5593,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4898\/revisions\/5593"}],"wp:attachment":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=4898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=4898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=4898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}