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