HTML5 Form Validation

11,095 views
10,948 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,095
On SlideShare
0
From Embeds
0
Number of Embeds
354
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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/

    ×