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

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="email">
<input type="url">
<input type="tel">
<input type="search">

13. NEW INPUT TYPES
<input type="number">
<input type="range">

15. NEW JS Methods
stepUp()/stepDown()
NEW JS FUNCTION
valueAsNumber

16. NEW INPUT TYPES
<input type="datetime">
<input type="date">
<input type="month">
<input type="week">
<input type="time">

18. NEW JS FUNCTION
valueAsDate

19. wufoo.com/html5/

20. ADDING THE
CONSTRAINTs

21. REQUIRED
ATTRIBUTE
<input type="text" required>
<input type="text"
required="">
<textarea required="" />

22. REQUIRED
ATTRIBUTE

23. SET THE
ERROR MESSAGE
<input type="text"
x-moz-errormessage
="FooBar">

24. SET THE
ERROR MESSAGE

25. Pattern
matching
<input type="email">
<input type="date">
<input type="url" required>

26. Pattern
matching

27. Pattern
ATTRIBUTE
<input type="text"
pattern="[-0-9]+">

28. CONTEXTUAL
ERROR MESSAGES
<input type="text"
pattern="[-0-9]+"
title="Must be a
number">

30. LIMIT
MAtching
<input type="number" max="2">
<input type="range" min="0"
max="1" step="0.1">
<input type="text"
maxlength="20">

34. BONUS SLIDE!
CSS3 UI pseudo-classes for
styling form states:
:required
:optional
:valid
:invalid
:default
:in-range
:out-of-range

35. CONSTRAINT
VALIDATION
A.P.I.

36. Is the api
present?
var hasValidation =
(myForm.checkValidity)
? true : false;

38. Do not
validate
<form novalidate>
<button formnovalidate>

39. Do not
validate
if(hasValidation === true) {
myForm.
setAttribute('novalidate','');
}

40. Feature
detection
function formSubmit(evt) {
(hasValidation === true) ?
newValidation() :
oldValidation();
evt.preventDefault();
}

41. BONUS SLIDe!
HTML5 Form Events:
oncontextmenu
onformchange
onforminput
oninput
oninvalid

42. DOES THE FORM
VALIDATE?
myForm.checkValidity();

43. Which ELEMENTs
will VALIDATE?
document.getElementById
('x').willValidate;

44. Which ELEMENTs
will VALIDATE?
var formNodes =
myForm.childNodes.length;
for(i=0; i<formNodes; i++) {
if(myForm.childNodes[i].
willValidate) {
doSomething;
}
}

45. DOES A field
VALIDATE?
thisNode.
checkValidity();

46. Validation
status
thisNode.validity;

47. Validity object
customError
patternMismatch
rangeOverflow
rangeUnderflow
stepMismatch
tooLong
typeMismatch
valid
valueMissing

48. Validity
object
for(var v in thisNode.validity) {
if (thisNode.validity[v] === true) {
var errorMessage;
switch(v){
case 'valueMissing' :
errorMessage = 'FooBar';
break;
}
}

49. SET THE
ERROR MESSAGE
thisNode.
setCustomValidity
(errorMessage);

50. GET THE
ERROR MESSAGE
document.
getElementById('x').
validationMessage;

51. alert('The error message is: '
+ thisNode.validationMessage);

52. BONUS SLIDE!
Javascript library
to polyfill HTML5
form support:
http://thecssninja.c
om/javascript/H5F

53. ESCAPING THE
CONSTRAINTs

54. THE END

55. BONUS SLIDE!
Resources:
http://www.broken-
links.com/2011/03/28/html
5-form-validation/
https://developer.mozilla
.org/en/HTML/HTML5/Forms_
in_HTML5

56. By Peter Gasston
Broken-links.com
@stopsatgreen
THANK You.