HTML5 Constraint Validation

Slide 1

HTML5 BRISTOL JS CONSTRAINT VALIDATION @drewm

Slide 2

FORMS ARE HARD.

Slide 3

YOU’RE LAZY AND YOUR CODE SUCKS.

Slide 4

BROWSERS ARE HERE TO SAVE US.

Slide 5

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

Slide 6

HTML5 CONSTRAINT VALIDATION

Slide 7

HTML5 CONSTRAINT VALIDATION Image: css-tricks.com

Slide 8

HTML5 CONSTRAINT VALIDATION

Slide 9

HTML5 CONSTRAINT VALIDATION

Slide 10

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

Slide 11

HTML5 CONSTRAINT VALIDATION

Slide 12

HTML5 CONSTRAINT VALIDATION :valid :invalid :in-range :out-of-range :required :optional CSS PSEUDO CLASSES

Slide 13

HTML5 CONSTRAINT VALIDATION Email (required) Favourite colour Next

Slide 14

HTML5 CONSTRAINT VALIDATION Height in furlongs Shape of head Submit

Slide 15

novalidate

Slide 16

HTML5 CONSTRAINT VALIDATION

Slide 17

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

Slide 18

JAVASCRIPT API

Slide 19

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

Slide 20

HTML5 CONSTRAINT VALIDATION

Slide 21

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

Slide 22

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

Slide 23

HTML5 CONSTRAINT VALIDATION

Slide 24

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