Skip to main content
ELYTE
EasyFrontendBuild

Controlled Form with Validation

Build a signup form in React with email (`data-testid="email-input"`), password (`data-testid="password-input"`), and confirm password (`data-testid="confirm-input"`) fields, plus a submit button (`data-testid="submit-b...

Start problemBrowse all problems

What you will practice

TypeScriptReactReact FundamentalsForms & Validation

Requirements

  • Keep `App` as the default exported React component with the provided `onSubmit` prop.
  • Render `email-input`, `password-input`, `confirm-input`, and `submit-button`.
  • Validate email, password, and confirm password on blur and render the matching error testid.
  • The submit button must stay disabled until all three fields are valid.
  • On submit, call `onSubmit`, show `Submitting...`, and disable the button while pending.
  • After `onSubmit` resolves, restore the button text to `Sign Up`.

Starter files

App.tsxEditable starter

What the judge checks

  • Runs in the react environment with the react-testing-library runner.
  • Uses a 5000ms judge budget.
  • Requires test IDs: email-input, password-input, confirm-input, submit-button.
  • Checks exact text for: submit_button.
  • Provides APIs: onSubmit.
  • Behavior rules include: Submit Disabled When Invalid, Email Error Shows On Blur, Password Error Shows On Blur, Confirm Error Shows On Blur.

Constraints

  • Do not show errors until the user has blurred that field — not on mount or onChange
  • Submit button must be programmatically disabled while a submission is in progress

Example behavior

Input
Email = `user@example.com`, password = `secret99`, confirm = `secret99`
Output
Submit button is enabled

Follow-up

How would you add a password strength meter (requires uppercase, a digit, and a special character) without changing the existing test behavior?