Make form validation fun again
summary
Demonstrates using the HTML5 constraint validation API to avoid heavy JS: checkValidity vs reportValidity (check returns boolean and fires invalid; report shows the system bubble but Chrome forces focus and blocks blur), setCustomValidity and pattern+title (custom messages via setCustomValidity and title for pattern errors). Covers validity object fields (tooLong, rangeUnderflow, typeMismatch), willValidate/will‑participate quirks, maxlength/defaultValue surprises, :placeholder-shown and :in-range/:out-of-range pseudo‑classes, and a JS pattern to gather and render all field errors.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 3:18API Constraint Validation basics
- 10:33Required and string length
- 15:32Patterns and custom messages
- 20:42New field types: email phone url
- 25:28Numeric fields specifics
- 30:23Validation on input blur
- 33:16Constraints bypass architecture
- 36:52Error collection custom handling
- 41:44Conclusion Q&A
related talks
45mBad Form
41mLet’s play with vanilla CSS / JS validations
36mBack to Basics Why HTML Forms Still Rule the Web
13mValidating forms with the HTML5 pattern attribute
34mDesigning form validation the right way
21mForm Validation Done Right
50mStructuring Accessible Forms
25mRe-Form the future. Rethinking Form Validations in React