A Sensational Exposé with Bewildering Demonstrations!

Slide 1

Slide 1 text

A Sensational ExposÉ With Bewildering Demonstrations By Peter Gasston Broken-links.com @stopsatgreen

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

HARRY HOUDINI

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

CONSTRAINT validation

Slide 9

Slide 9 text

CONSTRAIN: 1. Severely restrict scope, extent, or activity 2. confine forcibly, as by bonds.

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

NEW INPUT TYPES > > > >

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

NEW INPUT TYPES > >

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

NEW INPUT TYPES > > > > >

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

NEW JS FUNCTION valueAsDate valueAsDate

Slide 19

Slide 19 text

wufoo.com/html5/

Slide 20

Slide 20 text

ADDING THE CONSTRAINTs

Slide 21

Slide 21 text

REQUIRED ATTRIBUTE < > < > < />

Slide 22

Slide 22 text

REQUIRED ATTRIBUTE

Slide 23

Slide 23 text

SET THE ERROR MESSAGE < ="FooBar">

Slide 24

Slide 24 text

SET THE ERROR MESSAGE

Slide 25

Slide 25 text

Pattern matching > > required>

Slide 26

Slide 26 text

Pattern matching

Slide 27

Slide 27 text

Pattern ATTRIBUTE < >

Slide 28

Slide 28 text

CONTEXTUAL ERROR MESSAGES < >

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

LIMIT MAtching < > < > < >

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

CONSTRAINT VALIDATION A.P.I.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Do not validate < novalidate> < formnovalidate>

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Which ELEMENTs will VALIDATE? var formNodes = var formNodes = myForm.childNodes.length; myForm.childNodes.length; for(i=0; i

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Validation status thisNode thisNode. .validity; validity;

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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; } } } }

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

ESCAPING THE CONSTRAINTs

Slide 54

Slide 54 text

THE END

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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