Sign-up form with accessible errors
Add validation to this sign-up form. Rules: the email (id="email") must look like name@domain.tld, otherwise the message is Enter a valid email.; the password (id="password") needs at least 8 characters, otherwise Use at least 8 characters.
Show no errors before the first submit. After a submit, show each error in a paragraph right under its field, with id="email-error" or id="password-error", and keep them up to date as the user types.
A field with a visible error has aria-invalid="true" and aria-describedby set to its error's id.
When the form is submitted with no errors, show <p id="success">Welcome, asha@example.com!</p> (with the email typed).
What Check tests
- No errors show before the first submit
- An empty submit shows both messages
- Invalid fields have
aria-invalidandaria-describedby - Fixing the email removes its error right away
- A valid submit shows the welcome message
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.