Build a Form with validation | Interview Question

Q: Build a Form with validation

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React form experience is assumed. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code excerpts are copied from the runnable solution, and the output in section 6 was produced by actually running it on React 19.3.1. ## 1. Why This Even Matters — A Story First Think of a good receptionist at a clinic. You fill in a paper form at the desk. The receptionist does not snatch the clipboard after the first letter of your name to tell you it is "too short". They wait until you move on to the next line, and if you missed the phone number they point at that exact box, not at the whole page. When you hand it back complete, they say "thank you, we will call you". A bad web form does the opposite: it shows a wal

The problem

Question presented to candidate: "Build a contact form with Name, Email and Message. Show helpful error messages, but do not yell at people before they have had a chance to type. When they submit, send it to a fake API and show a thank-you screen. No form libraries, please."

Requirements:

Name (required, at least 2 characters), Email (required, valid format), Message (required, 10 to 200 characters, with a live character count).
An error appears after the field loses focus (blur) or after a submit attempt, and then updates live as the user types.
On submit with errors: show every error, a short summary ("Please fix 2 fields."), and move focus to the first invalid field.
On a valid submit: disable the button while a simulated request runs, map a server-side field error back onto its field, and show a success state with a way to start over.
Errors are announced to assistive technology and tied to their inputs.

What a strong answer should cover:

A single source of truth for values, with errors derived from values by a pure validate() function rather than stored and kept in sync by hand.
Touched and submitted flags that decide when an error is visible, separate from whether the field is invalid.
Controlled inputs (or v-model / reactive forms), noValidate on the form, and preventing the default submit.
Accessibility: <label for>, aria-invalid, aria-describedby pointing at the error text, a live region for the summary, focus on the first invalid field.
Server errors as a second error source that clears when the user edits that field; a guard against double submits.

Clarifying questions expected:

"Should errors show while typing, on blur, or only on submit?"
"Should the submit button be disabled until the form is valid, or always clickable?"
"Are the rules fixed, or do they come from the server or a schema?"

Code / implementation expected: Yes. A working form component with a pure validation function, touched/submitted tracking, accessible error markup and a simulated async submit.

React
Forms
Validation

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React form experience is assumed. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code excerpts are copied from the runnable solution, and the output in section 6 was produced by actually running it on React 19.3.1.

1. Why This Even Matters — A Story First

Think of a good receptionist at a clinic. You fill in a paper form at the desk. The receptionist does not snatch the clipboard after the first letter of your name to tell you it is "too short". They wait until you move on to the next line, and if you missed the phone number they point at that exact box, not at the whole page. When you hand it back complete, th

The solution is hidden so you can try first

13 min read · 10 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import ContactForm from "./src/components/ContactForm";
import "./styles.css";

export default function App() {
  return (
    <main className="page">
      <ContactForm />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.