a sensational exposé with bewildering demonstrations
DESCRIPTION
What is the Validation API, and how does it relate to Houdini?TRANSCRIPT
![Page 1: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/1.jpg)
A SensationalExposÉ WithBewildering
Demonstrations
By Peter GasstonBroken-links.com
@stopsatgreen
![Page 2: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/2.jpg)
![Page 3: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/3.jpg)
HARRY HOUDINI
![Page 4: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/4.jpg)
![Page 5: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/5.jpg)
![Page 6: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/6.jpg)
![Page 7: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/7.jpg)
![Page 8: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/8.jpg)
CONSTRAINT validation
![Page 9: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/9.jpg)
CONSTRAIN:
1. Severely restrictscope, extent,or activity
2. confine forcibly,as by bonds.
![Page 10: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/10.jpg)
![Page 11: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/11.jpg)
NEW INPUT TYPES
<input type=<input type=""emailemail"">><input type=<input type=""urlurl"">><input type=<input type=""teltel"">><input type=<input type=""searchsearch"">>
![Page 12: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/12.jpg)
![Page 13: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/13.jpg)
NEW INPUT TYPES
<input type=<input type=""numbernumber"">><input type=<input type=""rangerange"">>
![Page 14: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/14.jpg)
![Page 15: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/15.jpg)
NEW JS Methods
stepUp()/stepDown()stepUp()/stepDown()
valueAsNumbervalueAsNumber
NEW JS FUNCTION
![Page 16: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/16.jpg)
NEW INPUT TYPES
<input type=<input type=""datetimedatetime"">><input type=<input type=""datedate"">><input type=<input type=""monthmonth"">><input type=<input type=""weekweek"">><input type=<input type=""timetime"">>
![Page 17: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/17.jpg)
![Page 18: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/18.jpg)
NEW JS FUNCTION
valueAsDatevalueAsDate
![Page 19: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/19.jpg)
wufoo.com/html5/
![Page 20: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/20.jpg)
ADDING THECONSTRAINTs
![Page 21: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/21.jpg)
REQUIRED ATTRIBUTE
<<input type=input type=""texttext"" requiredrequired>><<input type="text"input type="text" requiredrequired=="""">><<textareatextarea requiredrequired=="""" /> />
![Page 22: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/22.jpg)
REQUIRED ATTRIBUTE
![Page 23: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/23.jpg)
SET THEERROR MESSAGE
<<input type=input type=""texttext" " x-moz-errormessagex-moz-errormessage="FooBar">="FooBar">
![Page 24: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/24.jpg)
SET THEERROR MESSAGE
![Page 25: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/25.jpg)
Pattern matching
<input type=<input type=""emailemail"">><input type=<input type="date""date">><input type=<input type=""urlurl"" required> required>
![Page 26: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/26.jpg)
Pattern matching
![Page 27: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/27.jpg)
Pattern ATTRIBUTE
<<input type=input type=""texttext"" pattern="[-0-9]+"pattern="[-0-9]+">>
![Page 28: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/28.jpg)
CONTEXTUALERROR MESSAGES
<<input type=input type=""texttext"" pattern="[-0-9]+"pattern="[-0-9]+" title="Must be a title="Must be a number"number">>
![Page 29: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/29.jpg)
![Page 30: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/30.jpg)
LIMITMAtching
<<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">>
![Page 31: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/31.jpg)
![Page 32: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/32.jpg)
![Page 33: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/33.jpg)
![Page 34: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/34.jpg)
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
![Page 35: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/35.jpg)
CONSTRAINTVALIDATION
A.P.I.
![Page 36: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/36.jpg)
Is the api present?
var hasValidation =var hasValidation =(myForm.(myForm.checkValiditycheckValidity) ) ? true : false;? true : false;
![Page 37: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/37.jpg)
![Page 38: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/38.jpg)
Do not validate
<<formform novalidate>novalidate><<buttonbutton formnovalidate> formnovalidate>
![Page 39: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/39.jpg)
Do not validate
if(hasValidation === true) {if(hasValidation === true) {myForm.myForm.
setAttribute('setAttribute('novalidatenovalidate','');','');}}
![Page 40: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/40.jpg)
Feature detection
function formSubmit(evt) {function formSubmit(evt) {(hasValidation === true) ? (hasValidation === true) ? newValidation() :newValidation() :oldValidation();oldValidation();evt.preventDefault();evt.preventDefault();
}}
![Page 41: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/41.jpg)
BONUS SLIDe!
HTML5 Form Events:HTML5 Form Events:oncontextmenuoncontextmenuonformchangeonformchangeonforminputonforminputoninputoninputoninvalidoninvalid
![Page 42: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/42.jpg)
DOES THE FORM VALIDATE?
myForm.myForm.checkValidity();checkValidity();
![Page 43: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/43.jpg)
document.getElementByIddocument.getElementById('x').('x').willValidate;willValidate;
Which ELEMENTs will VALIDATE?
![Page 44: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/44.jpg)
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]..
willValidatewillValidate) {) {doSomethingdoSomething;;
}}}}
![Page 45: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/45.jpg)
DOES A field VALIDATE?
thisNode.thisNode.checkValidity();checkValidity();
![Page 46: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/46.jpg)
Validationstatus
thisNodethisNode..validity;validity;
![Page 47: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/47.jpg)
Validity object
customErrorcustomErrorpatternMismatchpatternMismatchrangeOverflowrangeOverflowrangeUnderflowrangeUnderflowstepMismatchstepMismatchtooLongtooLongtypeMismatchtypeMismatchvalidvalidvalueMissingvalueMissing
![Page 48: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/48.jpg)
Validity object
for(var v in thisNode.validity) {for(var v in thisNode.validity) {if (thisNode.if (thisNode.validityvalidity[v] === true) {[v] === true) {var errorMessage;var errorMessage;switch(v){switch(v){case 'valueMissing' :case 'valueMissing' :errorMessage = 'FooBar';errorMessage = 'FooBar';break;break;
}}}}
![Page 49: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/49.jpg)
SET THEERROR MESSAGE
thisNode.thisNode.setCustomValiditysetCustomValidity(errorMessage);(errorMessage);
![Page 50: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/50.jpg)
GET THEERROR MESSAGE
document.document.getElementById('x').getElementById('x').validationMessage;validationMessage;
![Page 51: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/51.jpg)
alert('The error message is: ' alert('The error message is: ' + thisNode.+ thisNode.validationMessagevalidationMessage););
![Page 52: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/52.jpg)
BONUS SLIDE!
Javascript library Javascript library to polyfill HTML5 to polyfill HTML5 form support:form support:http://thecssninja.chttp://thecssninja.com/javascript/H5Fom/javascript/H5F
![Page 53: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/53.jpg)
ESCAPING THECONSTRAINTs
![Page 54: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/54.jpg)
THE END
![Page 55: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/55.jpg)
BONUS SLIDE!
Resources:Resources:http://www.broken-http://www.broken-links.com/2011/03/28/htmllinks.com/2011/03/28/html5-form-validation/5-form-validation/
https://developer.mozillahttps://developer.mozilla.org/en/HTML/HTML5/Forms_.org/en/HTML/HTML5/Forms_in_HTML5in_HTML5
![Page 56: A Sensational Exposé With Bewildering Demonstrations](https://reader033.vdocuments.us/reader033/viewer/2022052410/55514f33b4c905f2288b53ea/html5/thumbnails/56.jpg)
THANK You.
By Peter GasstonBroken-links.com
@stopsatgreen