a sensational exposé with bewildering demonstrations
DESCRIPTION
What is the Validation API, and how does it relate to Houdini?TRANSCRIPT
A SensationalExposÉ WithBewildering
Demonstrations
By Peter GasstonBroken-links.com
@stopsatgreen
HARRY HOUDINI
CONSTRAINT validation
CONSTRAIN:
1. Severely restrictscope, extent,or activity
2. confine forcibly,as by bonds.
NEW INPUT TYPES
<input type=<input type=""emailemail"">><input type=<input type=""urlurl"">><input type=<input type=""teltel"">><input type=<input type=""searchsearch"">>
NEW INPUT TYPES
<input type=<input type=""numbernumber"">><input type=<input type=""rangerange"">>
NEW JS Methods
stepUp()/stepDown()stepUp()/stepDown()
valueAsNumbervalueAsNumber
NEW JS FUNCTION
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"">>
NEW JS FUNCTION
valueAsDatevalueAsDate
wufoo.com/html5/
ADDING THECONSTRAINTs
REQUIRED ATTRIBUTE
<<input type=input type=""texttext"" requiredrequired>><<input type="text"input type="text" requiredrequired=="""">><<textareatextarea requiredrequired=="""" /> />
REQUIRED ATTRIBUTE
SET THEERROR MESSAGE
<<input type=input type=""texttext" " x-moz-errormessagex-moz-errormessage="FooBar">="FooBar">
SET THEERROR MESSAGE
Pattern matching
<input type=<input type=""emailemail"">><input type=<input type="date""date">><input type=<input type=""urlurl"" required> required>
Pattern matching
Pattern ATTRIBUTE
<<input type=input type=""texttext"" pattern="[-0-9]+"pattern="[-0-9]+">>
CONTEXTUALERROR MESSAGES
<<input type=input type=""texttext"" pattern="[-0-9]+"pattern="[-0-9]+" title="Must be a title="Must be a number"number">>
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">>
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
CONSTRAINTVALIDATION
A.P.I.
Is the api present?
var hasValidation =var hasValidation =(myForm.(myForm.checkValiditycheckValidity) ) ? true : false;? true : false;
Do not validate
<<formform novalidate>novalidate><<buttonbutton formnovalidate> formnovalidate>
Do not validate
if(hasValidation === true) {if(hasValidation === true) {myForm.myForm.
setAttribute('setAttribute('novalidatenovalidate','');','');}}
Feature detection
function formSubmit(evt) {function formSubmit(evt) {(hasValidation === true) ? (hasValidation === true) ? newValidation() :newValidation() :oldValidation();oldValidation();evt.preventDefault();evt.preventDefault();
}}
BONUS SLIDe!
HTML5 Form Events:HTML5 Form Events:oncontextmenuoncontextmenuonformchangeonformchangeonforminputonforminputoninputoninputoninvalidoninvalid
DOES THE FORM VALIDATE?
myForm.myForm.checkValidity();checkValidity();
document.getElementByIddocument.getElementById('x').('x').willValidate;willValidate;
Which ELEMENTs will VALIDATE?
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;;
}}}}
DOES A field VALIDATE?
thisNode.thisNode.checkValidity();checkValidity();
Validationstatus
thisNodethisNode..validity;validity;
Validity object
customErrorcustomErrorpatternMismatchpatternMismatchrangeOverflowrangeOverflowrangeUnderflowrangeUnderflowstepMismatchstepMismatchtooLongtooLongtypeMismatchtypeMismatchvalidvalidvalueMissingvalueMissing
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;
}}}}
SET THEERROR MESSAGE
thisNode.thisNode.setCustomValiditysetCustomValidity(errorMessage);(errorMessage);
GET THEERROR MESSAGE
document.document.getElementById('x').getElementById('x').validationMessage;validationMessage;
alert('The error message is: ' alert('The error message is: ' + thisNode.+ thisNode.validationMessagevalidationMessage););
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
ESCAPING THECONSTRAINTs
THE END
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
THANK You.
By Peter GasstonBroken-links.com
@stopsatgreen