Designing form validation the right way
summary
Argues that inline validation improves speed and satisfaction but is often broken: 40% of major e‑commerce sites lack inline validation and of those that do 20% implement it incorrectly. Builds a React‑based library called ConfRise Form that keeps form state local (not Redux), accepts an array of composed validation functions that return promises, preserves server errors, and avoids disabling submit buttons. Demonstrates fixes for premature validation, dynamic cross‑field checks, and perceived UI lag.
AI-written summary · about
chapters (12)
- 0:00Start
- 11:52It's 'meant to give immediate user support and guidance
- 14:114 key challenges that need to be overcome...
- 16:09Poor styling support and inflexible error output
- 17:57Impossible to align backend data constraints and error messages with the on the client
- 19:13Accept server side validations exist always
- 24:43Key point is that Conferizeform holds all the form state which is passed down to your component as props
- 30:19Inline validation is absolutely necessary but difficult to do right
- 31:23Use feedback while a user is filling out a field only in certain scenarios but use an appropriate delay
- 32:00Give users positive reinforcement where possible
- 33:09If your unsure where to add inline validations, focus more on fields which require some user thought to fill out
- 33:21Don't enforce restrictive formats on users- let the system do it for them
related talks
28mBuilding validated forms with great UX in React
25mRe-Form the future. Rethinking Form Validations in React
21mForm Validation Done Right
26mThe Art of Building Modern Dynamic Forms
11mForms Don't Need to Suck
28mThe Art of Form Validation
36mBack to Basics Why HTML Forms Still Rule the Web
22mBuilding a next-gen validations framework