Input HarborISSUE #16 of 46

validation · client-side vs server-side

FormaVSCaptain Invalid Input

Forma saysValidation has two layers: the browser’s built-in checks (free, client-side) and your server’s (mandatory, trustworthy).

HTML gives you client-side validation for free — required, type="email", pattern, min/max — and the browser blocks submission with a helpful message. It's great UX but easily bypassed.

So the rule: client-side validation is a convenience; server-side validation is the real defense. Never trust data just because the form checked it — anyone can submit straight to your endpoint. Validate on both sides; rely on the server.

Power-ups you unlock

Client-side (required, pattern, type) = fast feedback, free
It is easily bypassed — never your security layer
Server-side validation is mandatory and authoritative
Validate both; trust only the server

Captain Invalid Input attacks — common mistakes

Trusting client-side validation as your only check
Disabling native validation without replacing it
Vague error messages that do not say how to fix the input

Boss battleBuild a form that requires a valid email and a 5-digit code, see the browser block bad input — then note why the server must re-check.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#">
    <p><label>email <input type="email" required></label></p>
    <p><label>code  <input pattern="[0-9]{5}" required title="5 digits"></label></p>
    <button>submit</button>
    <p style="color:#8a82b0;font-size:12px">the browser blocks bad input — the server must still re-check.</p>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Button · Type · Submit · Reset · Button Canvas · Pixel-By-Pixel Drawing ›