Live coding ยท 40 minutes
Sign-up form with validation
Build a sign-up form in React in 40 minutes, with no form library. The fields are email, password, confirm password, and a checkbox to accept the terms. Validate the fields, submit to a fake async function that sometimes fails, and show pending, success and error states. The form must work with a keyboard and a screen reader. Explain your decisions while you code, as in a live round.
Requirements
- Rules: the email looks valid, the password has at least 8 characters, the confirmation matches, the terms box is checked
- An error appears after the user leaves a field or tries to submit, not on the first key press
- Each error is next to its field and linked with aria-describedby, and an invalid field has aria-invalid
- Submit calls an async function; while it runs, the button is disabled, shows a pending text, and a second submit is impossible
- Success shows a confirmation; a server error shows a message and keeps the entered values
- After a failed submit, focus moves to the first invalid field
- Every input has a visible label, the correct type and an autocomplete value
What reviewers look for
- Validation as pure functions outside the component, easy to test
- A clear model: values, touched fields, errors derived from values, and one submit status (idle, pending, success, error)
- A real form element with onSubmit, so Enter submits; native input types and attributes first
- No double submit, and the failed request is handled with try and catch
- Accessible errors: linked to their fields, announced, and focus moved to the first one
- You say when validation runs (blur, change, submit) and why
Check before you hand it in
- A bad email, a short password, a different confirmation and an unchecked box each show their own message
- No error shows while I type in a field for the first time; errors show after I leave the field or press Submit
- During the request the button is disabled, and Enter or a second click does not send a second request
- I saw both results: a success message, and a server error that keeps my values so I can try again
- Every input has a label, an invalid field has aria-invalid and aria-describedby, and after a failed submit focus is on the first invalid field
- I explained each decision aloud, including when validation runs
- Validation, submit and the pending, success and error states worked within 40 minutes
If there is time
- Check on the server whether the email is already used, with debounce and cancellation
- Add a button that shows the password, with a correct accessible name
- Move the logic into a reusable useForm hook
- Write three unit tests for the validation functions