A Sensational Exposé with Bewildering Demonstrations!

On the HTML5 Constraint Validation API

Transcript

1. A Sensational ExposÉ With Bewildering Demonstrations By Peter Gasston Broken-links.com @stopsatgreen
3. HARRY HOUDINI
8. CONSTRAINT validation
9. CONSTRAIN: 1. Severely restrict scope, extent, or activity 2. confine forcibly, as by bonds.
11. NEW INPUT TYPES <input type= <input type=" "email email" "> > <input type= <input type=" "url url" "> > <input type= <input type=" "tel tel" "> > <input type= <input type=" "search search" "> >
13. NEW INPUT TYPES <input type= <input type=" "number number" "> > <input type= <input type=" "range range" "> >
15. NEW JS Methods stepUp()/stepDown() stepUp()/stepDown() valueAsNumber valueAsNumber NEW JS FUNCTION
16. NEW INPUT TYPES <input type= <input type=" "datetime datetime" "> > <input type= <input type=" "date date" "> > <input type= <input type=" "month month" "> > <input type= <input type=" "week week" "> > <input type= <input type=" "time time" "> >
18. NEW JS FUNCTION valueAsDate valueAsDate
19. wufoo.com/html5/
20. ADDING THE CONSTRAINTs
21. REQUIRED ATTRIBUTE < <input type= input type=" "text text" " required required> > < <input type="text" input type="text" required required= ="" ""> > < <textarea textarea required required= ="" "" /> />
22. REQUIRED ATTRIBUTE
23. SET THE ERROR MESSAGE < <input type= input type=" "text text" " x-moz-errormessage x-moz-errormessage ="FooBar"> ="FooBar">
24. SET THE ERROR MESSAGE
25. Pattern matching <input type= <input type=" "email email" "> > <input type= <input type="date" "date"> > <input type= <input type=" "url url" " required> required>
26. Pattern matching
27. Pattern ATTRIBUTE < <input type= input type=" "text text" " pattern="[-0-9]+" pattern="[-0-9]+"> >
28. CONTEXTUAL ERROR MESSAGES < <input type= input type=" "text text" " pattern="[-0-9]+" pattern="[-0-9]+" title="Must be a title="Must be a number" number"> >
30. LIMIT MAtching < <input type= input type="number" "number" max="2" max="2"> > < <input type= input type="range" "range" min="0" min="0" max="1" step="0.1" max="1" step="0.1"> > < <input type= input type="text" "text" maxlength="20" maxlength="20"> >
34. BONUS SLIDE! CSS3 UI pseudo-classes for CSS3 UI pseudo-classes for styling form states: styling form states: :required :required :optional :optional :valid :valid :invalid :invalid :default :default :in-range :in-range :out-of-range :out-of-range
35. CONSTRAINT VALIDATION A.P.I.
36. Is the api present? var hasValidation = var hasValidation = (myForm. (myForm.checkValidity checkValidity) ) ? true : false; ? true : false;
38. Do not validate < <form form novalidate> novalidate> < <button button formnovalidate> formnovalidate>
39. Do not validate if(hasValidation === true) { if(hasValidation === true) { myForm. myForm. setAttribute(' setAttribute('novalidate novalidate',''); ',''); } }
40. Feature detection function formSubmit(evt) { function formSubmit(evt) { (hasValidation === true) ? (hasValidation === true) ? newValidation() : newValidation() : oldValidation(); oldValidation(); evt.preventDefault(); evt.preventDefault(); } }
41. BONUS SLIDe! HTML5 Form Events: HTML5 Form Events: oncontextmenu oncontextmenu onformchange onformchange onforminput onforminput oninput oninput oninvalid oninvalid
42. DOES THE FORM VALIDATE? myForm. myForm.checkValidity(); checkValidity();
43. document.getElementById document.getElementById ('x'). ('x').willValidate; willValidate; Which ELEMENTs will VALIDATE?
44. Which ELEMENTs will VALIDATE? var formNodes = var formNodes = myForm.childNodes.length; myForm.childNodes.length; for(i=0; i<formNodes; i++) for(i=0; i<formNodes; i++) { { if(myForm.childNodes[i] if(myForm.childNodes[i]. . willValidate willValidate) { ) { doSomething doSomething; ; } } } }
45. DOES A field VALIDATE? thisNode. thisNode. checkValidity(); checkValidity();
46. Validation status thisNode thisNode. .validity; validity;
47. Validity object customError customError patternMismatch patternMismatch rangeOverflow rangeOverflow rangeUnderflow rangeUnderflow stepMismatch stepMismatch tooLong tooLong typeMismatch typeMismatch valid valid valueMissing valueMissing
48. Validity object for(var v in thisNode.validity) { for(var v in thisNode.validity) { if (thisNode. if (thisNode.validity validity[v] === true) { [v] === true) { var errorMessage; var errorMessage; switch(v){ switch(v){ case 'valueMissing' : case 'valueMissing' : errorMessage = 'FooBar'; errorMessage = 'FooBar'; break; break; } } } }
49. SET THE ERROR MESSAGE thisNode. thisNode. setCustomValidity setCustomValidity (errorMessage); (errorMessage);
50. GET THE ERROR MESSAGE document. document. getElementById('x'). getElementById('x'). validationMessage; validationMessage;
51. alert('The error message is: ' alert('The error message is: ' + thisNode. + thisNode.validationMessage validationMessage); );
52. BONUS SLIDE! Javascript library Javascript library to polyfill HTML5 to polyfill HTML5 form support: form support: http://thecssninja.c http://thecssninja.c om/javascript/H5F om/javascript/H5F
53. ESCAPING THE CONSTRAINTs
54. THE END
55. BONUS SLIDE! Resources: Resources: http://www.broken- http://www.broken- links.com/2011/03/28/html links.com/2011/03/28/html 5-form-validation/ 5-form-validation/ https://developer.mozilla https://developer.mozilla .org/en/HTML/HTML5/Forms_ .org/en/HTML/HTML5/Forms_ in_HTML5 in_HTML5
56. THANK You. By Peter Gasston Broken-links.com @stopsatgreen