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-button", initial text "Sign Up"). Validate each field on blur: email must contain @ (show data-testid="email-error"), password must be at least 8 chars (show data-testid="password-error"), confirm must match password (show data-testid="confirm-error"). The submit button is disabled until all three fields are valid. On submit: call onSubmit(), show "Submitting..." while pending, revert to "Sign Up" on resolve.
Email = `user@example.com`, password = `secret99`, confirm = `secret99`
Submit button is enabled
- 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
How would you add a password strength meter (requires uppercase, a digit, and a special character) without changing the existing test behavior?