Design & UXBeginner 1 to 2 hours

Design a Form Validation Flow

Design the interaction pattern for a sign-up form with inline validation.

The Scenario

A SaaS product's sign-up form has 6 fields (name, email, password, confirm password, company, phone). Currently, all validation happens on submit — users fill in the entire form, click "Create Account," and get a wall of red errors at the top.

The Brief

Redesign the form validation to be inline and progressive. Define when validation fires, how errors are displayed, and what the success states look like.

Deliverables

  • Validation timing for each field: on blur, on change, or on submit — with justification for each choice
  • Error message design: placement, styling, and tone for each field's error state
  • Success states: what the user sees when a field passes validation (checkmark, green border, etc.)
  • The submit button behaviour: disabled vs enabled, loading state, and error summary after failed submission

Submission Guidance

Validating on every keystroke is annoying (the email field shows "invalid" before you finish typing). Validating only on submit is too late. On blur is usually the sweet spot. Show your reasoning.

Submit Your Work

Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.

This appears on your public Badge.

0/20000 charactersMarkdown supported

One per line or comma separated. Up to 5 links.

By submitting, you agree your submission text, name, and evaluation will appear on a public Badge URL.