Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Form Validation

12,150 views

Published on

Slides from a talk I gave at Super Mondays in Newcastle on Tuesday 26 April 2011

Published in: Technology
  • Login to see the comments

HTML5 Form Validation

  1. 1. Form ValidationwithHTML5Ian OxleySuper Mondays, 26 April 2011
  2. 2. $ whois• Hi, I’m Ian• Web / Application Developer at Sage• http://ianoxley.com• @ianoxley
  3. 3. this.talk• HTML5 client-side <form> validation• New <input> types and attributes make this really easy• (Still need to perform validation on the server)
  4. 4. HTML4• Client-side validation requires JavaScript• Custom code, jQuery validate, etc.• Extra work to give user optimal UX
  5. 5. • New <input> types and attributes• Browsers have built-in client-side validation
  6. 6. For Example...
  7. 7. Required fields<input type="text" required>
  8. 8. Regex with pattern attribute<input type="text" required pattern="[A-Za-z-0-9]+s[A-Za-z-0-9]+" placeholder="Firstname Lastname">
  9. 9. Email Validation<input type="email" requiredplaceholder="Enter your email address">
  10. 10. URL Validation<input type="url" required placeholder="Website or blog">
  11. 11. Numeric Data<input type="number" value="1" min="1" max="4" required>
  12. 12. HTML5 Forms + CSS3• New psuedo classes for better UX• Visual cues and feedback to guide the user
  13. 13. :required and :optional
  14. 14. :valid and :invalid,:in-range and :out-of-range
  15. 15. No Validation?<form novalidate> ...</form>
  16. 16. Cross browser?IE Firefox Safari Chrome Opera iPhone Android- 4.0+ 5.0+ 6.0+ 9.0+ - - Source: http://diveintohtml5.org/forms.html#validation
  17. 17. JavaScript fallback...• Modernizr library for HTML5 detectionif (!Modernizr.input.required) { // Validate the old-fashioned way setValidationFallback();}
  18. 18. Can also be used...• In browser extensions• Greasemonkey scripts• Prototyping / designing in the browser
  19. 19. Further info• A Form of Madness http://diveintohtml5.org/forms.html• Forward Thinking Form Validation http://www.alistapart.com/articles/forward-thinking-form- validation/• New Form Features in HTML5 http://dev.opera.com/articles/view/new-form-features-in-html5/• Modernizr JavaScript Library http://www.modernizr.com/
  20. 20. /(any questions)?/
  21. 21. Contact me• Email: ijoxley@gmail.com• Twitter: @ianoxley• Demos: http://ianoxley.com/talks/ html5forms/demos/

×