This page demonstrates Felte + Zod integration with svelte-pure-admin form
components. Felte handles form state, validation, and touched tracking automatically.
Using Felte with Zod schemas eliminates boilerplate while providing type-safe validation.
The errors and touched props integrate seamlessly.
Felte Setup
1. Install Dependencies
2. Create Form with Schema
3. Use in Template
That's it! Felte handles touched state, validation on blur/change, and form submission.
No manual state management needed.
Common Zod Patterns
Interactive Tests
Each form below uses Felte with Zod validation.
Test 1: Basic Email Validation
Test 2: Multiple Fields Validation
Test 3: Touched Behavior
Both inputs have the same error, but only the touched one shows error styling.
This demonstrates how touched controls error visibility.
Error exists but not shown
This error is always present
Test 4: Select & Date Validation
Test 5: Password with Cross-Field Validation
Password requires: 8+ characters, uppercase letter, and a number. Uses Zod's .refine() for cross-field validation.
Real Use Case: Create User Form
This demonstrates a realistic form with async API submission, loading states, and server-side error handling.
Try submitting with
admin@example.com to see a server-side validation error.Test 6: Manual State Override
The state prop takes precedence over auto-derived state from errors.
This is useful when you need manual control.
state='success' overrides errors
Test 7: Accessibility (aria-invalid)
Open browser DevTools and inspect these inputs to verify aria-invalid attribute.
Error!
Should NOT have aria-invalid attribute