This document discusses HTML5 form validation, which allows browsers to perform client-side validation of forms using new input types and attributes. This reduces the need for custom JavaScript validation code. However, server-side validation is still required. The document provides examples of how to specify required fields, regular expressions, data types, and validation error handling using HTML5. It also discusses browser support and fallback options to polyfill functionality for older browsers.
2. 2Significant Work. Extraordinary People. SRA.
What?
• HTML5 client-side <form> validation
• New <input> types and attributes make it easy
• One drawback … you still need to perform server side validation
3. 3Significant Work. Extraordinary People. SRA.
HTML 4
• Client-side validation requires JavaScript
• Custom code, jQuery validate, etc.
• Extra work to give the user optimal UX
4. 4Significant Work. Extraordinary People. SRA.
HTML5
• New <input> types and attributes
• Browsers have built-in client-side validation
14. 14Significant Work. Extraordinary People. SRA.
JavaScript fallback…
• Modernizr library for HTML5 detection
//only polyfill forms, if placeholder or autofocus are not supported
if(!Modernizr.input.placeholder || !Modernizr.input.autofocus){
jQuery.webshims.polyfill('forms');
}
15. 15Significant Work. Extraordinary People. SRA.
Further info
• A Form of Madness
http://diveintohtml5.info/forms.html
• Forward Thinking Form Validation
http://alistapart.com/article/forward-thinking-form-validation
• New Form Features in HTML5
http://dev.opera.com/articles/view/new-form-features-in-html5/
• Modernizr JavaScript Library
http://modernizr.com/
16. 16Significant Work. Extraordinary People. SRA.
Can also be used in…
• In browser extensions
• Greasemonkey scripts
• Prototyping/designing in the browser