Client-Side vs Server-Side Form Validation

Should you validate forms in the browser or on the server? The short answer: both, for different reasons. Client-side validation is a convenience for your users. Server-side validation is a requirement for you.

What client-side validation is

Checks that run in the visitor's browser before the form is sent — HTML attributes like required and type="email", plus any JavaScript rules you add.

Strengths:

• Instant feedback, no waiting for a round trip.
• Fewer failed submissions and less frustration.
• Saves server resources by catching obvious mistakes early.

Weakness: it's not under your control. Anyone can:

• disable JavaScript,
• edit the HTML in developer tools and remove required,
• or skip your page entirely and send a request straight to your endpoint with curl or a bot.

curl -X POST https://example.com/submit -d "email=not-an-email&age=-5"

No browser ran, so no browser validation ran.

What server-side validation is

Checks that run where the data is received, after the request arrives and before anything is stored, emailed or acted on.

Strengths:

• Can't be bypassed.
• Can check things the browser can't know: whether a username is taken, a coupon is valid, stock is available, or a user is allowed to do this.
• Protects your database and downstream systems from bad or malicious data.

Weakness: feedback is slower, and if it's your only validation, people discover mistakes after waiting for a page load.

Side by side

	Client-side	Server-side
Purpose	User experience	Correctness and security
Can be bypassed	Yes	No
Speed of feedback	Instant	After a request
Knows about your data (e.g. taken usernames)	Only via an extra API call	Yes
Required?	Strongly recommended	Always

What to validate where

Rule	Client	Server
Required fields	Yes	Yes
Email / URL format	Yes	Yes
Length limits	Yes	Yes — protects storage too
Number and date ranges	Yes	Yes
Passwords match	Yes	Yes
Username or email already registered	Optional, via API	Yes
Price, total or discount	Display only	Always recalculate on the server
Permissions ("can this user do this?")	Never trust the client	Yes
File type and size	Helpful hint	Yes — inspect the actual file
Spam / bot detection	Honeypot field	Filtering, rate limits, CAPTCHA verification

Two rules worth memorising:

1. Never trust anything the client calculates — prices, totals, user IDs, roles.
2. Treat all input as untrusted text — escape it when displaying, use parameterised queries when storing.

Keeping the rules in sync

Duplicating rules in two places invites drift. Some ways to avoid it:

• Use HTML attributes for the basics (required, type, min, maxlength) — they are your client-side rules, and the same limits are easy to mirror on the server.
• Share a schema in JavaScript/TypeScript projects. A library such as Zod can validate the same schema in the browser and on the server.
• Return field-level errors from the server in a predictable shape (for example { "errors": { "email": "Already registered" } }) and show them with the same UI you use for client-side errors.

Server-side validation without your own server

If your site is static and your form posts to a form backend, the backend does the server-side work. With Formclick, every submission is checked on the server before it reaches you:

• Requests are size-limited and must include a valid access key.
• Spam is filtered, repeated identical submissions are ignored and rapid-fire submissions are rate-limited.
• reCAPTCHA or Cloudflare Turnstile tokens are verified on the server (paid plans).
• On paid plans you can restrict a form to your own domains.

Business rules specific to you — "bookings must be at least 24 hours ahead" — still belong in your own processing, for example in a workflow triggered by a webhook.

A sensible default

1. HTML validation attributes on every field.
2. A little JavaScript for friendly messages and cross-field rules.
3. Full validation on the server or form backend.
4. Clear display of server errors when they happen.

Learn the client-side layer in depth in HTML Form Validation Explained and How to Display Custom Form Validation Messages.