Deviopath › React

Registration Form

Hard · Forms

Build a registration <form> with these inputs: name="username", name="email", name="password" (type password), name="confirm" (type password) and a checkbox name="terms", plus a submit button "Register".

On submit (remember e.preventDefault()), validate everything and show ALL problems at once, each as a <p className="error">, in this order:

1. "Username must be at least 3 characters" (trimmed)

2. "Email must contain @"

3. "Password must be at least 8 characters and contain a number"

4. "Passwords do not match"

5. "You must accept the terms"

No errors are shown before the first submit. If everything is valid, replace the form with <div className="summary"> containing <h2>Welcome, ana!</h2> and <p>Registered with ana@mail.com</p> (trimmed values).

Next: Budget Tracker