Form Validation and Pending UI

A bare Server Action form is not enough

You can wire a form to a Server Action, but a real form needs three more things to be usable: it must reject bad input (an empty title, a too-short comment), tell the user what went wrong, and show that something is happening while it saves so they do not click twice. This lesson adds all three.

Step 1 — validate on the server

Never trust what a form sends — a user can leave fields blank or send junk. So the Server Action checks the data first and, if it is bad, returns an errors object instead of saving. (Many teams use a library called Zod to describe the rules; here we validate by hand so the idea is crystal clear.)

// app/actions.js
'use server';

export async function createComment(prevState, formData) {
  const text = formData.get('text');

  // validate
  if (!text || text.trim().length < 3) {
    return { error: 'Comment must be at least 3 characters.' };
  }

  // ...save the comment to the database...
  return { success: true };
}

Step 2 — show errors with useActionState

How does that returned { error } get onto the screen? React gives a hook called useActionState. You hand it your action; it gives you back the latest state (whatever the action returned last time) and a wrapped action to put on the form. When the action returns { error: ... }, that becomes the new state and you display it.

Note the action above takes prevState as its first argument — useActionState passes the previous returned state there, and the form data second.

'use client';
import { useActionState } from 'react';
import { createComment } from './actions';

export default function CommentForm() {
  const [state, formAction] = useActionState(createComment, null);

  return (
    <form action={formAction}>
      <input name="text" placeholder="Your comment" />
      <button type="submit">Post</button>
      {state?.error && <p style={{ color: 'red' }}>{state.error}</p>}
    </form>
  );
}

Step 3 — a pending "Saving…" state with useFormStatus

While the action runs, the button should say "Saving…" and be disabled so the user cannot submit twice. React gives useFormStatus, which reports a pending flag that is true while the form is submitting. It must be read from a component inside the form, so we make a small SubmitButton.

'use client';
import { useFormStatus } from 'react-dom';

export default function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Saving…' : 'Post'}
    </button>
  );
}

How the three pieces work together, step by step

Here is the full journey when a user submits the comment form:

1. The user types a comment and clicks Post. Because the form uses action={formAction}, the data is sent to the server.
2. Instantly, useFormStatus flips pending to true, so the button shows "Saving…" and is disabled.
3. On the server, createComment runs and validates the text first.
4. If the text is too short, the action returns { error: ... }. useActionState stores that as state, the red message appears, and nothing was saved.
5. If the text is valid, the action saves it and returns { success: true }. (You would also revalidatePath here so the new comment appears.)
6. Either way, the action finishes, pending goes back to false, and the button returns to "Post".

Progressive enhancement — a bonus

Progressive enhancement means the form still works even if JavaScript has not loaded yet. Because a Server Action form posts to the server the normal HTML way, a user on a slow connection can submit before the page is fully interactive. The pending and error niceties are layered on top once JavaScript loads — but the core form never breaks.