A sign-up form with your own validation
The form has novalidate, so the browser won't block it: your submit listener does the checking. On submit, always call preventDefault(), then check each field and write a message into its error paragraph (or empty it when the field is fine):
- #err-name: the name is empty.
- #err-email: the email is empty or not a valid email (use the field's validity).
- #err-password: the password has fewer than 8 characters.
- #err-confirm: the confirmation doesn't match the password.
If everything is valid, show Welcome, <name>! in #result (for example Welcome, Asha!). If anything is invalid, #result must be empty.
What Check tests
- Submitting doesn't reload the page
- An empty form shows name, email and password errors
- A badly written email is reported
- Different passwords are reported
- A short password is reported
- Valid data shows the welcome and clears every error
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.