Module 5 · Forms, performance and access Lesson 13 of 15
Forms with validation and clear errors
A form that validates on the client and shows one clear message per field is the difference between a sign-up and a bounce. Keep the values in state, validate on submit, show the error next to the input.
Worked example
errors.email = 'Enter a valid email' is set on submit, and the input renders aria-invalid and the message, so a screen reader hears it too.
Your practice task
Build a sign-up form with three fields, validate them on submit, and show the first error next to its field.
Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.
Key takeaway
A form that validates on the client and shows one clear message per field is the difference between a sign-up and a bounce. Keep the values in state, validate on submit, show the error next to the input.
Keep your place in this course
A free account saves which lessons you have finished and unlocks the certificate. The lesson itself stays free to read.
Create free account or sign inCourse complete
You finished every lesson.
Your certificate is ready, and the projects you built are the proof to attach to an application.
Almost there
15 lessons left of 15
Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.