The document discusses HTML5 form validation constraints and APIs. It provides examples of how to add constraints like required fields, pattern matching, and value limits. It also demonstrates how to detect constraint validation support, check field and form validity, and access validation error messages through the validity API. The document is an introduction to HTML5 form validation features and constraints.

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.