A Sensational Exposé With Bewildering Demonstrations

1,631 views

Published on

What is the Validation API, and how does it relate to Houdini?

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

  • Be the first to like this

No Downloads
Views
Total views
1,631
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

A Sensational Exposé With Bewildering Demonstrations

  1. 1. A Sensational ExposÉ With BewilderingDemonstrations By Peter Gasston Broken-links.com @stopsatgreen
  2. 2. HARRY HOUDINI
  3. 3. CONSTRAINTvalidation
  4. 4. CONSTRAIN:1. Severely restrictscope, extent,or activity2. confine forcibly,as by bonds.
  5. 5. NEW INPUT TYPES<input type="email"><input type="url"><input type="tel"><input type="search">
  6. 6. NEW INPUT TYPES<input type="number"><input type="range">
  7. 7. NEW JS MethodsstepUp()/stepDown()NEW JS FUNCTIONvalueAsNumber
  8. 8. NEW INPUT TYPES<input type="datetime"><input type="date"><input type="month"><input type="week"><input type="time">
  9. 9. NEW JS FUNCTIONvalueAsDate
  10. 10. wufoo.com/html5/
  11. 11. ADDING THECONSTRAINTs
  12. 12. REQUIRED ATTRIBUTE<input type="text" required><input type="text"required=""><textarea required="" />
  13. 13. REQUIREDATTRIBUTE
  14. 14. SET THEERROR MESSAGE<input type="text"x-moz-errormessage="FooBar">
  15. 15. SET THEERROR MESSAGE
  16. 16. Pattern matching<input type="email"><input type="date"><input type="url" required>
  17. 17. Patternmatching
  18. 18. Pattern ATTRIBUTE<input type="text"pattern="[-0-9]+">
  19. 19. CONTEXTUALERROR MESSAGES <input type="text" pattern="[-0-9]+" title="Must be a number">
  20. 20. LIMIT MAtching<input type="number" max="2"><input type="range" min="0"max="1" step="0.1"><input type="text"maxlength="20">
  21. 21. BONUS SLIDE!CSS3 UI pseudo-classes forstyling form states::required:optional:valid:invalid:default:in-range:out-of-range
  22. 22. CONSTRAINTVALIDATION A.P.I.
  23. 23. Is the api present?var hasValidation =(myForm.checkValidity)? true : false;
  24. 24. Do not validate<form novalidate><button formnovalidate>
  25. 25. Do not validateif(hasValidation === true) { myForm.setAttribute(novalidate,);}
  26. 26. Feature detectionfunction formSubmit(evt) { (hasValidation === true) ? newValidation() : oldValidation(); evt.preventDefault();}
  27. 27. BONUS SLIDe!HTML5 Form Events:oncontextmenuonformchangeonforminputoninputoninvalid
  28. 28. DOES THE FORM VALIDATE?myForm.checkValidity();
  29. 29. Which ELEMENTswill VALIDATE?document.getElementById(x).willValidate;
  30. 30. Which ELEMENTswill VALIDATE?var formNodes =myForm.childNodes.length;for(i=0; i<formNodes; i++) { if(myForm.childNodes[i].willValidate) { doSomething; }}
  31. 31. DOES A field VALIDATE?thisNode.checkValidity();
  32. 32. Validation statusthisNode.validity;
  33. 33. Validity object customError patternMismatch rangeOverflow rangeUnderflow stepMismatch tooLong typeMismatch valid valueMissing
  34. 34. Validity objectfor(var v in thisNode.validity) {if (thisNode.validity[v] === true) { var errorMessage; switch(v){ case valueMissing : errorMessage = FooBar; break; }}
  35. 35. SET THEERROR MESSAGEthisNode.setCustomValidity(errorMessage);
  36. 36. GET THEERROR MESSAGEdocument.getElementById(x).validationMessage;
  37. 37. alert(The error message is: + thisNode.validationMessage);
  38. 38. BONUS SLIDE!Javascript libraryto polyfill HTML5form support:http://thecssninja.com/javascript/H5F
  39. 39. ESCAPING THECONSTRAINTs
  40. 40. THE END
  41. 41. BONUS SLIDE!Resources:http://www.broken-links.com/2011/03/28/html5-form-validation/https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5
  42. 42. By Peter Gasston Broken-links.com @stopsatgreenTHANK You.

×