Frontend Fundamentals Exercise - Build a Controlled Form Component

Question

## Problem

Build a registration form component with the following requirements:

- Fields: `username` (3-20 chars, alphanumeric), `email` (valid format), `password` (min 8 chars, at least one digit).
- Validate on blur; show inline error messages below each field.
- The Submit button is disabled until all fields are valid.
- On submit, call `onSubmit(formData)` and display a success banner; reset the form.

```jsx
// Implement this component
function RegistrationForm({ onSubmit }) {
  // ...
}
```

**Expected behavior:**
```
User types "ab" in username -> on blur shows: "Username must be 3-20 characters"
User fixes it -> error clears, Submit enables if other fields are also valid
User submits -> onSubmit({username, email, password}) called, form resets
```

## Follow-ups

1. How would you debounce async username-availability checks as the user types?
2. How do you make this form accessible (ARIA attributes, focus management)?
3. Describe how to lift this validation logic into a reusable `useForm` hook.
4. How would you handle server-side validation errors returned from the submit call?

Frontend Fundamentals Exercise - Build a Controlled Form Component

Question Details

Full Details

Topics

More from Rippling