Controlled Forms and Validation

Required tools

• Node.js (20.x LTS or newer)
• npm (10.x (bundled with Node.js))

Setup

1. Run `npm create vite@latest signup-form -- --template react` in a terminal.
2. Run `cd signup-form && npm install`.
3. Replace the contents of `src/App.jsx` with the starter file below.
4. Run `npm run dev` and open the printed local URL in your browser.

Project structure

signup-form/
  src/
    App.jsx
    main.jsx
  package.json

Starter files

import { useState } from "react";

function validateEmail(email) {
  if (email.length === 0) return "Email is required.";
  if (!email.includes("@")) return "Email must contain an @ symbol.";
  return null;
}

function validatePassword(password) {
  if (password.length === 0) return "Password is required.";
  if (password.length < 8) return "Password must be at least 8 characters.";
  return null;
}

export default function App() {
  const [values, setValues] = useState({ name: "", email: "", password: "" });
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});

  function handleChange(field) {
    return (e) => {
      const next = { ...values, [field]: e.target.value };
      setValues(next);
      if (touched[field]) {
        validateField(field, next[field]);
      }
    };
  }

  function validateField(field, value) {
    // TODO: call validateEmail/validatePassword for the right field,
    // update the errors state for just this field.
  }

  function handleBlur(field) {
    return () => {
      setTouched({ ...touched, [field]: true });
      validateField(field, values[field]);
    };
  }

  function handleSubmit(e) {
    e.preventDefault();
    // TODO: validate every field, and only proceed if there are no errors.
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name
        <input value={values.name} onChange={handleChange("name")} onBlur={handleBlur("name")} />
      </label>
      <label>
        Email
        <input value={values.email} onChange={handleChange("email")} onBlur={handleBlur("email")} />
        {errors.email && <p role="alert">{errors.email}</p>}
      </label>
      <label>
        Password
        <input
          type="password"
          value={values.password}
          onChange={handleChange("password")}
          onBlur={handleBlur("password")}
        />
        {errors.password && <p role="alert">{errors.password}</p>}
      </label>
      <button type="submit">Sign up</button>
    </form>
  );
}

Requirements

• Every input is controlled (its value comes from state, never read directly from the DOM)
• Each field validates on blur the first time, then live on every keystroke once it has shown an error
• The submit handler validates all fields and does not proceed if any field is invalid
• Error messages are specific (state what's wrong), not a generic 'invalid' message

Commands to run

• Start the dev server

  npm run dev

• Build for production (sanity check only, not required to complete the lab)

  npm run build

Expected behavior

Typing in the email field and leaving it (blur) with an invalid value shows a specific error message beneath the field. Fixing the value and typing further updates the error live. Submitting with any invalid field does not proceed and shows all relevant errors.

Verify it yourself

• In the running app, leave the email field empty and click into the password field

  Expected: An 'Email is required.' message appears beneath the email field

• Type a valid email and a password shorter than 8 characters, then click Sign up

  Expected: The form does not submit, and the password field shows its specific length error

• Fill in a valid name, email, and an 8+ character password with a digit, then click Sign up

  Expected: No error messages are shown (you can confirm submission by adding a temporary console.log inside handleSubmit)

Troubleshooting

• Typing in a field doesn't update what's displayed — Confirm the input's value prop is bound to state and onChange calls setValues — an uncontrolled input (no value prop bound to state) won't reflect keystrokes back through React.
• `npm run dev` fails immediately with a module error — Delete the node_modules folder and package-lock.json, then run npm install again — a partial or interrupted install is the most common cause.
• Errors never appear even with invalid input — Check that validateField is actually being called from both handleBlur and handleChange (once touched), and that it calls setErrors with the new message.

Extension challenge

Add a fourth field, 'confirmPassword', that must match 'password' exactly, with its own specific error message when it doesn't.