Your SlideShare is downloading. ×
0
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
HTML5 Form Validation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Form Validation

10,647

Published on

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

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

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

No Downloads
Views
Total Views
10,647
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. Form ValidationwithHTML5Ian OxleySuper Mondays, 26 April 2011
    • 2. $ whois• Hi, I’m Ian• Web / Application Developer at Sage• http://ianoxley.com• @ianoxley
    • 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. HTML4• Client-side validation requires JavaScript• Custom code, jQuery validate, etc.• Extra work to give user optimal UX
    • 5. • New <input> types and attributes• Browsers have built-in client-side validation
    • 6. For Example...
    • 7. Required fields<input type="text" required>
    • 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. Email Validation<input type="email" requiredplaceholder="Enter your email address">
    • 10. URL Validation<input type="url" required placeholder="Website or blog">
    • 11. Numeric Data<input type="number" value="1" min="1" max="4" required>
    • 12. HTML5 Forms + CSS3• New psuedo classes for better UX• Visual cues and feedback to guide the user
    • 13. :required and :optional
    • 14. :valid and :invalid,:in-range and :out-of-range
    • 15. No Validation?<form novalidate> ...</form>
    • 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. JavaScript fallback...• Modernizr library for HTML5 detectionif (!Modernizr.input.required) { // Validate the old-fashioned way setValidationFallback();}
    • 18. Can also be used...• In browser extensions• Greasemonkey scripts• Prototyping / designing in the browser
    • 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. /(any questions)?/
    • 21. Contact me• Email: ijoxley@gmail.com• Twitter: @ianoxley• Demos: http://ianoxley.com/talks/ html5forms/demos/

    ×