Signup FormLoading saved progress…

Signup Form

Build a signup form that validates on submit and posts to an API. The core is the validation step: gather the fields, run each rule, collect failures into an errors object keyed by field, and only POST when that object is empty. While the request is in flight, disable the button; on success, show a confirmation.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

Name / email / password / confirm fields, with per-field errors and a submit.

Examples

empty name → errors.name = "Name is required"
"bob@" → errors.email = "Enter a valid email"
password "123" → errors.password = "At least 8 characters"
confirm != password → errors.confirm = "Passwords don't match"
all valid → button disables, request runs, then "Account created!" shows

Notes

  • Validate into an errors object. One key per field; the form is valid when it has no keys.
  • Block submit on errors. Don't POST unless validation passes; show each field's message.
  • Disable while submitting. Track an in-flight flag so the user can't double-submit.
  • Controlled inputs. Each field is value + onChange; clear its error as the user fixes it (or on next submit).
Loading editor…
Loading preview…