{"id":1532,"date":"2011-03-14T08:05:32","date_gmt":"2011-03-14T16:05:32","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=1532"},"modified":"2011-03-14T08:05:32","modified_gmt":"2011-03-14T16:05:32","slug":"html5-form-validation-on-sumo","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/","title":{"rendered":"HTML5 Form Validation on SUMO"},"content":{"rendered":"

HTML5 has a lot of buzz lately and lots of demos<\/a> showing off it’s capabilities are popping up. Most demos show off the rich interactive features that were previously limited to flash. That is awesome because it grabs people’s attention and gets them excited but, as a web developer, I think one of the most useful and underrated features are in HTML5 Forms<\/a>. I can’t even count how many times I have had to write form validation code in JavaScript. A future in which browsers do all this for me is a future I love!<\/p>\n

On SUMO<\/a>, we are using some of the new HTML5 Form features throughout the site. Below are some examples with screenshots.<\/p>\n

required="required"<\/h2>\n

Adding required="required"<\/code> attribute to a form field, prevents the form submission if the field is left empty.<\/p>\n

Firefox 4:
\"Firefox<\/p>\n

Chrome 10:
\"Chrome<\/p>\n

Opera 11:
\"Opera<\/p>\n

type="email"<\/h2>\n

The email<\/code> input field validates that the value entered is a valid email address.<\/p>\n

Firefox 4:
\"Firefox<\/p>\n

Chrome 10:
\"Chrome<\/p>\n

Opera 11:
\"Opera<\/p>\n

type="url"<\/h2>\n

The url<\/code> input field validates that the value entered is a valid URL. (Although, it does seem to accept some questionable values on Firefox 4.)<\/p>\n

Firefox 4:
\"Firefox<\/p>\n

Chrome 10:
\"Chrome<\/p>\n

Opera 11:
\"Opera<\/p>\n

pattern="regex"<\/h2>\n

The pattern<\/code> attribute allows you to require the entered values to match a regular expression pattern. On the user profile pages on SUMO, we have optional fields for users to enter their Twitter and Facebook URLs. We are able to restrict these to the correct domain with pattern=\"https?:\/\/(?:www\\.)?twitter\\.com\/.+\"<\/code> and pattern=\"https?:\/\/(?:www\\.)?facebook\\.com\/.+\"<\/code>.<\/p>\n

Firefox 4:
\"Firefox<\/p>\n

Chrome 10:
\"Chrome<\/p>\n

Opera 11:
\"Opera<\/p>\n

But what about Internet Explorer?<\/h2>\n

You probably noticed there are no screenshots for IE (or Safari). Unfortunately, IE9 and Safari 5 don’t support any of this yet :(. If you really need client side validation and care about IE users, you won’t be tossing your JavaScript validation any time soon. But you should still use these new attributes so your site is ready for IE10 ;). In the meantime, you can use feature detection to only run JavaScript validation when the browser doesn’t do it for you.<\/p>\n

There are a lot more new HTML5 form fields, some yet to be supported. Some come with cool widgets (input type="color"<\/code><\/a> will have a color picker). We don’t have a big need for these on SUMO, as our forms are mostly basic text fields, but it’s exciting to look at what’s coming. Check out diveintohtml5 for a more comprehensive look at HTML5 forms.<\/a> Also be sure to check out all the HTML5 & Friends dashboard<\/a>.<\/p>\n

Please remember that client side validation, whether native in the browser or added via JavaScript, is no substitute to server side validation. It just improves the User Experience and saves some HTTP round trips.<\/p>\n

Are you using HTML5 forms yet? <\/p>\n","protected":false},"excerpt":{"rendered":"

HTML5 has a lot of buzz lately and lots of demos showing off it’s capabilities are popping up. Most demos show off the rich interactive features that were previously limited to flash. That is awesome because it grabs people’s attention … Continue reading<\/a><\/p>\n","protected":false},"author":214,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4714,288],"tags":[],"coauthors":[],"yoast_head":"\nHTML5 Form Validation on SUMO - Mozilla Web Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ricky Rosario\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/\",\"name\":\"HTML5 Form Validation on SUMO - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2011\/03\/required-ff4.png\",\"datePublished\":\"2011-03-14T16:05:32+00:00\",\"dateModified\":\"2011-03-14T16:05:32+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/6f5ca48549e165176e2a0d28e2b6d56f\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/#primaryimage\",\"url\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2011\/03\/required-ff4.png\",\"contentUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2011\/03\/required-ff4.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 Form Validation on SUMO\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/6f5ca48549e165176e2a0d28e2b6d56f\",\"name\":\"Ricky Rosario\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/cb2984137d2ec8970def4ed4fbb3f10a\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/98b33abe99237bd64c446336903f4e41?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/98b33abe99237bd64c446336903f4e41?s=96&d=mm&r=g\",\"caption\":\"Ricky Rosario\"},\"description\":\"Web Developer for SUMO\",\"sameAs\":[\"http:\/\/rickyrosario.com\"],\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/rrosariomozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Form Validation on SUMO - Mozilla Web Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/","twitter_misc":{"Written by":"Ricky Rosario","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/","url":"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/","name":"HTML5 Form Validation on SUMO - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2011\/03\/required-ff4.png","datePublished":"2011-03-14T16:05:32+00:00","dateModified":"2011-03-14T16:05:32+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/6f5ca48549e165176e2a0d28e2b6d56f"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/#primaryimage","url":"http:\/\/blog.mozilla.org\/webdev\/files\/2011\/03\/required-ff4.png","contentUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2011\/03\/required-ff4.png"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/14\/html5-form-validation-on-sumo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"HTML5 Form Validation on SUMO"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/6f5ca48549e165176e2a0d28e2b6d56f","name":"Ricky Rosario","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/cb2984137d2ec8970def4ed4fbb3f10a","url":"https:\/\/secure.gravatar.com\/avatar\/98b33abe99237bd64c446336903f4e41?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/98b33abe99237bd64c446336903f4e41?s=96&d=mm&r=g","caption":"Ricky Rosario"},"description":"Web Developer for SUMO","sameAs":["http:\/\/rickyrosario.com"],"url":"https:\/\/blog.mozilla.org\/webdev\/author\/rrosariomozilla-com\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/1532"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/214"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=1532"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/1532\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=1532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=1532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=1532"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=1532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}