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

1. Form Validation
with
HTML5
Ian Oxley
Super 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" required
placeholder="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 detection
if (!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/