If you find my content useful and want to support the channel, consider contributing a coffee ☕: https://hbyt.us/coffee
SvelteKit is a framework for building modern, high-performance, browser-based applications. It was developed by the team behind the popular Svelte framework and is powered by Svelte. Unlike other JavaScript frameworks, it doesn't use a virtual DOM or deliver a bloated and slow application. Zod is a TypeScript-first schema declaration and validation library which enables us to define a schema for our form data and then check user input against that schema.
In this SvelteKit tutorial, I demonstrate how to implement Form Validation within SvelteKit, which ensures we are validating user input prior to anything else. I also demonstrate how to display useful UI error messages and indicators to provide the user with the information they need to successfully submit their form.
⭐Starter Code
https://github.com/huntabyte/sveltekit-form-validation/blob/main/README.md
📂 Final Code
https://github.com/huntabyte/sveltekit-form-validation
💽 Form Actions in SvelteKit
https://youtu.be/52nXUwQWeKI
⏪ Previous Video (Authentication with SvelteKit & PocketBase)
https://youtu.be/doDKaKDvB30
📚 Resources Mentioned In This Video
- Zod Docs: https://zod.dev
- Zod Error Handling: https://zod.dev/ERROR_HANDLING
- DaisyUI: https://daisyui.com/
- TailwindCSS: https://tailwindcss.com/
🚀 Become a channel member: https://hbyt.us/join
💬 Discord: https://hbyt.us/discord
🐦 Twitter: https://hbyt.us/twitter
🖥️ Setup Stuff: https://hbyt.us/gear
🔖 Chapters:
00:00 - Introduction
00:28 - What is Zod
01:35 - Defining Our Schema
06:11 - User-Friendly Error Messages
11:18 - UI Validation Messages
16:45 - Custom Validation (Password & Confirm Password)
📃 Topics Covered:
- How to validate forms in SvelteKit
- How to validate user input SvelteKit
- What is Zod?
- How to use Zod with SvelteKit
- How to validate passwords with Zod
- SvelteKit and Zod
- What is SvelteKit?
__________________________________________
(Affiliate links may be included in this description. If you choose to purchase a product from one of those links, I may receive a small commission at no cost to you. Thank you for supporting the channel!)