Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A Sensational Exposé with Bewildering Demonstra...
Search
Peter Gasston
April 18, 2011
Programming
1
50
A Sensational Exposé with Bewildering Demonstrations!
On the HTML5 Constraint Validation API
Peter Gasston
April 18, 2011
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
140
Your Reality Here
stopsatgreen
0
82
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
73
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
160
Surveying the Landscape Sept. 2016
stopsatgreen
1
290
Surveying the Landscape
stopsatgreen
4
760
Other Decks in Programming
See All in Programming
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
110
Open source software: how to live long and go far
gaelvaroquaux
0
660
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
Jasprが凄い話
hyshu
0
110
Formの複雑さに立ち向かう
bmthd
1
920
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
460
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.1k
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
350
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
Facilitating Awesome Meetings
lara
52
6.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Designing Experiences People Love
moore
140
23k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Embracing the Ebb and Flow
colly
84
4.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing for Performance
lara
604
68k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Adaptive Systems
keathley
40
2.4k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Transcript
A Sensational ExposÉ With Bewildering Demonstrations By Peter Gasston Broken-links.com
@stopsatgreen
None
HARRY HOUDINI
None
None
None
None
CONSTRAINT validation
CONSTRAIN: 1. Severely restrict scope, extent, or activity 2. confine
forcibly, as by bonds.
None
NEW INPUT TYPES <input type= <input type=" "email email" ">
> <input type= <input type=" "url url" "> > <input type= <input type=" "tel tel" "> > <input type= <input type=" "search search" "> >
None
NEW INPUT TYPES <input type= <input type=" "number number" ">
> <input type= <input type=" "range range" "> >
None
NEW JS Methods stepUp()/stepDown() stepUp()/stepDown() valueAsNumber valueAsNumber NEW JS FUNCTION
NEW INPUT TYPES <input type= <input type=" "datetime datetime" ">
> <input type= <input type=" "date date" "> > <input type= <input type=" "month month" "> > <input type= <input type=" "week week" "> > <input type= <input type=" "time time" "> >
None
NEW JS FUNCTION valueAsDate valueAsDate
wufoo.com/html5/
ADDING THE CONSTRAINTs
REQUIRED ATTRIBUTE < <input type= input type=" "text text" "
required required> > < <input type="text" input type="text" required required= ="" ""> > < <textarea textarea required required= ="" "" /> />
REQUIRED ATTRIBUTE
SET THE ERROR MESSAGE < <input type= input type=" "text
text" " x-moz-errormessage x-moz-errormessage ="FooBar"> ="FooBar">
SET THE ERROR MESSAGE
Pattern matching <input type= <input type=" "email email" "> >
<input type= <input type="date" "date"> > <input type= <input type=" "url url" " required> required>
Pattern matching
Pattern ATTRIBUTE < <input type= input type=" "text text" "
pattern="[-0-9]+" pattern="[-0-9]+"> >
CONTEXTUAL ERROR MESSAGES < <input type= input type=" "text text"
" pattern="[-0-9]+" pattern="[-0-9]+" title="Must be a title="Must be a number" number"> >
None
LIMIT MAtching < <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"> >
None
None
None
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
CONSTRAINT VALIDATION A.P.I.
Is the api present? var hasValidation = var hasValidation =
(myForm. (myForm.checkValidity checkValidity) ) ? true : false; ? true : false;
None
Do not validate < <form form novalidate> novalidate> < <button
button formnovalidate> formnovalidate>
Do not validate if(hasValidation === true) { if(hasValidation === true)
{ myForm. myForm. setAttribute(' setAttribute('novalidate novalidate',''); ',''); } }
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: oncontextmenu oncontextmenu
onformchange onformchange onforminput onforminput oninput oninput oninvalid oninvalid
DOES THE FORM VALIDATE? myForm. myForm.checkValidity(); checkValidity();
document.getElementById document.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]. . willValidate willValidate) { ) { doSomething doSomething; ; } } } }
DOES A field VALIDATE? thisNode. thisNode. checkValidity(); checkValidity();
Validation status thisNode thisNode. .validity; validity;
Validity object customError customError patternMismatch patternMismatch rangeOverflow rangeOverflow rangeUnderflow rangeUnderflow
stepMismatch stepMismatch tooLong tooLong typeMismatch typeMismatch valid valid valueMissing valueMissing
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; } } } }
SET THE ERROR MESSAGE thisNode. thisNode. setCustomValidity setCustomValidity (errorMessage); (errorMessage);
GET THE ERROR MESSAGE document. document. getElementById('x'). getElementById('x'). validationMessage; validationMessage;
alert('The error message is: ' alert('The error message is: '
+ thisNode. + thisNode.validationMessage validationMessage); );
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
ESCAPING THE CONSTRAINTs
THE END
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
THANK You. By Peter Gasston Broken-links.com @stopsatgreen