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

  • passes validation ▸ valueMissing
  • required field is empty ▸ typeMismatch
  • email or url field value is not the correct type ▸ tooShort
  • minLength attribute not satisfied ▸ tooLong
  • maxLength attribute not satisfied

HTML5 CONSTRAINT VALIDATION VALIDITY STATE OBJECT ▸ patternMismatch

  • pattern attribute not satisfied ▸ badInput
  • non-numeric value in a number field ▸ stepMismatch
  • value does not match the step attribute ▸ rangeOverflow
  • value is heigher than the max attribute ▸ rangeUnderflow
  • value is lower than the min attribute

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