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
Open source software: how to live long and go far
gaelvaroquaux
0
660
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
290
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
楽しく向き合う例外対応
okutsu
0
670
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
990
Rubyと自由とAIと
yotii23
6
1.8k
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
はじめての Go * WASM *OCR
sgash708
1
100
sappoRo.R #12 初心者セッション
kosugitti
0
280
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
A designer walks into a library…
pauljervisheath
205
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Embracing the Ebb and Flow
colly
84
4.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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