How to Build UX-Friendly Form Validation in SvelteKit with Zod

1. Introduction Most tutorials validate forms either on submit or on every keystroke. In real-world apps, both approaches can create poor user experiences. In this article, we’ll build a UX friendly client-side validation system in SvelteKit using Zod that: Validates on blur Switches to real-time validation once the user starts editing Validates everything on submit Handles cross-field validation (Password match confirmation) The goal is to create predictable, maintainable, schema-based validation logic without messy conditionals. 2. Project Setup The project is single route sveltekit application that uses components from shadcn-svelte . npx sv create svelte-form-validation --add tailwindcss cd svelte-form-validation npx shadcn-svelte@latest init Then install zod & component additions. Refer to the project readme for exact commands. 3. Designing the Validation Strategy Our Validation Rules Validate on blur Once a user starts typing after blur -> validate on input On submit -> mark all