Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML form error project: return values, summary links, and field repairs

Last updated: 5 Oct 20269 min read
project
IntermediateBy AITrove Editorial

A failed form submission needs a page-level result and field-level repair instructions. Return the person's entered values, mark only failed controls invalid, and connect each message to its control.

Render a useful failure

Assume a server rejected inspection I-47 because the seal code was too short and the finding was empty. The response title and main heading announce two errors. Each summary link jumps to a control; the adjacent message states what to change. The code keeps the attempted seal value so a reviewer can correct it instead of starting over. This is the HTML for an error response, not a backend implementation. A real endpoint must validate and authorize every request, escape returned values, protect the POST, and preserve only data the reviewer is allowed to see.

html
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>2 errors — inspection I-47</title></head>
<body>
<main>
  <h1>Correct 2 fields in inspection I-47</h1>
  <nav aria-label="Form errors">
    <ul>
      <li><a href="#seal-code">Seal code: use two letters and four digits.</a></li>
      <li><a href="#inspection-finding">Finding: describe the observed condition.</a></li>
    </ul>
  </nav>
  <form action="/inspections/I-47/review" method="post">
    <label for="seal-code">Seal code</label>
    <input id="seal-code" name="seal_code" value="47" pattern="[A-Z]{2}[0-9]{4}" aria-invalid="true" aria-describedby="seal-code-error" required>
    <p id="seal-code-error">Enter a code such as SC0047.</p>
    <label for="inspection-finding">Finding</label>
    <textarea id="inspection-finding" name="finding" aria-invalid="true" aria-describedby="finding-error" required></textarea>
    <p id="finding-error">Describe the seal condition before review.</p>
    <button type="submit">Review inspection</button>
  </form>
</main>
</body></html>

Behavior and cost

A full-page server response can use its title and heading to announce failure. If the same errors are injected into an already open page without navigation, an appropriate status or alert announcement may be needed too. Native validation helps with simple omissions but cannot replace the server's rules. A server round trip costs more than local feedback, yet it makes the authoritative decision visible and allows a useful response when script is unavailable. Retest the form with keyboard-only navigation, corrected values, and a successful submission.

Common Mistakes

  • Do not clear correct fields after one field fails.
  • Do not identify errors only by color or a generic message.
  • Do not trust the returned value without escaping it into the right HTML context.

Connected lessons

html
project
Storage details