Video Belajar
Tonton dan pelajari berbagai topik menarik melalui video pembelajaran eksklusif dari Channel Huntabyte.
Huntabyte
20661
SvelteKit Form Validation with Zod
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!)
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!)