Validation Demo

See how the same Zod validation schemas work on both client and server

Shared ValidationType-SafeDRY Principle
Client-Side Validation
Validates before sending to server using Zod schema. Instant feedback, no network request on error.

Try these:

  • Leave name empty → "Name must be at least 2 characters"
  • Enter "a" as name → "Name must be at least 2 characters"
  • Enter invalid email → "Invalid email address"
  • Short message (5 chars) → "Message must be at least 10 characters"
  • Valid input → Success ✓
Server-Side Validation
Sends data directly to server. Backend validates using the same Zod schema and returns errors.

Try these:

  • Leave name empty → Server returns error
  • Enter invalid email → Server returns error
  • Short message → Server returns error
  • Valid input → Success ✓
🎯 Key Takeaways

Same Validation, Different Places

Both forms use demoContactSchema from @cf-stack/types. The validation rules are defined once and used everywhere.

Identical Error Messages

Try the same invalid input in both forms. You'll see the exact same error message - whether validated on client or server.

Better UX with Client-Side

Client-side validation provides instant feedback without network requests. Users get immediate error corrections.

Security with Server-Side

Server-side validation is essential for security. Never trust client input - always validate on the server too!

packages/types/src/validation/demo.validation.ts
→ Shared by frontend (React) and backend (Hono)
→ Single source of truth for validation rules
→ No authentication required - perfect for demos!