A presentation at BristolJS in in Bristol, UK by Drew McLellan
HTML5 BRISTOL JS CONSTRAINT VALIDATION @drewm
FORMS ARE HARD.
YOU’RE LAZY AND YOUR CODE SUCKS.
BROWSERS ARE HERE TO SAVE US.
HTML5 CONSTRAINT VALIDATION 1. Users enter weird shiz into forms 2. So user input needs to be validated 3. It’s faster and more user-friendly to do that in the browser first 4. You’re lazy and your code sucks 5. HTML5 introduced built-in validation for forms THE PREMISE
HTML5 CONSTRAINT VALIDATION
HTML5 CONSTRAINT VALIDATION Image: css-tricks.com
HTML5 CONSTRAINT VALIDATION
HTML5 CONSTRAINT VALIDATION
HTML5 CONSTRAINT VALIDATION 1. Enforces required fields 2. Prevents mistakes by customising UI to common field types 3. Validates the format of common field types 4. Can be customised with advanced regex patterns 5. Can be styled with CSS BUILT-IN VALIDATION
HTML5 CONSTRAINT VALIDATION
HTML5 CONSTRAINT VALIDATION :valid :invalid :in-range :out-of-range :required :optional CSS PSEUDO CLASSES
HTML5 CONSTRAINT VALIDATION Email (required) Favourite colour Next
HTML5 CONSTRAINT VALIDATION Height in furlongs Shape of head Submit
novalidate
HTML5 CONSTRAINT VALIDATION
HTML5 CONSTRAINT VALIDATION 1. It’s very tempting to turn off validation 2. In doing so you lose a lot of functionality 3. You then need to implement that functionality yourself 4. You’re lazy and your code sucks 5. Better to work with it DISABLING VALIDATION
JAVASCRIPT API
HTML5 CONSTRAINT VALIDATION ‣ Enables us to ascertain the validity state of a field ‣ We get to find out not only if it’s valid/invalid, but also why ‣ We can then update our interface accordingly ‣ Write the bespoke parts and use the browser for the boring stuff ‣ Because you’re lazy and your code sucks VALIDATION API
HTML5 CONSTRAINT VALIDATION
HTML5 CONSTRAINT VALIDATION VALIDITY STATE OBJECT ▸ valid
HTML5 CONSTRAINT VALIDATION VALIDITY STATE OBJECT ▸ patternMismatch
HTML5 CONSTRAINT VALIDATION
HTML5 CONSTRAINT VALIDATION ‣ What you do with the information is up to you ‣ Offers the opportunity to customise the validation UI ‣ That’s great because the browser UI is ugly VALIDATION API
HTML5 CONSTRAINT VALIDATION Email (required) Favourite colour Next
HTML5 CONSTRAINT VALIDATION Email (required) Favourite colour Next
HTML5 CONSTRAINT VALIDATION Email (required) Favourite colour Next drew@example.com
HTML5 CONSTRAINT VALIDATION Height in furlongs Shape of head Submit
HTML5 CONSTRAINT VALIDATION Height in furlongs Shape of head Submit
IT’S BRILLIANT. Search developer.mozilla.org for “constraint validation”
THANKS. @drewm
Half the battle of the web platform is knowing what technology is out there, ready to use. We're all familiar with the ability to declare validation constraints in our HTML5 forms, but were you aware there's a JavaScript API that goes along with it?
Stop turning off the browser's validation each time things get tricky, and instead learn to work with it for better results.
The following resources were mentioned during the presentation or are useful additional information.
The most comprehensive guide I was able to find on the subject.
Written by Chris Ferdinandi for CSS-Tricks
Here’s what was said about this presentation on social media.
