Forms and client-side validation

Controlled inputs

A controlled input is an input whose value comes from React state, and whose onChange handler updates that state on every key press. React is then the single source of truth: the value you validate and send is exactly what the user sees.

import { useState } from 'react';

function NoteForm({ onSave }) {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [errors, setErrors] = useState({});
  const [saving, setSaving] = useState(false);

  async function handleSubmit(event) {
    event.preventDefault(); // stop the browser's full page reload
    const found = validateNoteForm({ title, body });
    setErrors(found);
    if (Object.keys(found).length > 0) return;
    setSaving(true);
    try {
      await onSave({ title: title.trim(), body });
    } finally {
      setSaving(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <label htmlFor="title">Title</label>
      <input id="title" value={title} onChange={(e) => setTitle(e.target.value)}
        required maxLength={100}
        aria-invalid={errors.title ? true : undefined}
        aria-describedby={errors.title ? 'title-error' : undefined} />
      {errors.title && <p id="title-error" className="error">{errors.title}</p>}

      <label htmlFor="body">Note</label>
      <textarea id="body" value={body} onChange={(e) => setBody(e.target.value)} maxLength={5000} />

      <button type="submit" disabled={saving}>{saving ? 'Saving...' : 'Save'}</button>
    </form>
  );
}

onSubmit runs when the user presses Save or hits Enter in the title. A normal HTML form would send the data and reload the whole page. event.preventDefault() stops that, so your JavaScript can validate and send the data with fetch instead (you will connect it to the API in the next module).

Mirror the server rules

Client-side validation means checking the input in the browser before sending it. Use exactly the same rules as the backend, so the user hears about a problem at once instead of after a network round trip.

Show errors as text, linked to the field

Put each error message right next to its field, in words. Mark the field with aria-invalid="true" (tells screen readers the value is wrong) and point to the message with aria-describedby="title-error" (the screen reader reads the message when the field gets focus). A red border is fine as extra decoration, but never the only sign.

<label for="title">Title</label>
<input id="title" name="title" required maxlength="100"
       aria-invalid="true" aria-describedby="title-error">
<p id="title-error">Title is required</p>

Stop double submits

On a slow network, users press Save twice. Without protection you get two identical notes. Keep a saving flag in state, set it to true when the request starts and back to false when it ends (finally runs on success and on error), and disable the button while it is true. Changing the text to "Saving..." tells the user something is happening.

React 19 form actions (good to know)

React 19 also lets you pass a function as the form's action: <form action={saveNote}>. React calls it with the form data when the form is submitted. The useActionState hook gives you the last result (for example the errors) and an isPending flag you can use to disable the button, and useFormStatus lets a child button read whether its form is pending. The ideas above (same rules, text errors, no double submit) stay the same whichever style you use.