React Hook Form + Zod Validation 💥 Frontend Validation in Next.js Job Portal App | Ep 21
In Day 21 of our Next.js + MySQL Job Portal Project, we finally add frontend validation to our registration form using React Hook Form (RHF) and Zod 🎯
You’ve already seen server-side validation with Zod — now it’s time to bring the same power to the client side! In this video, we’ll install and configure React Hook Form, integrate it with Zod using the @hookform/resolvers package, and handle validation errors gracefully for each input field.
You’ll clearly understand the 4 main parts of useForm() — register, handleSubmit, formState, and watch — and how to use them to simplify form handling and improve performance.
By the end of this video, you’ll have a fully validated registration form with frontend Zod integration, making your job portal app both user-friendly and bug-free 💪
----------------------------------------------------------------------------------
📂 Source Code
👉 GitHub Repo: https://github.com/thapatechnical/job-portal-nextjs
------------------------------------------------------------------------------------
🔗 Useful Playlists
📘 Next.js Full Stack Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp0lwvSBaIzzgV9X0ZiZ-42O&si=aQ_TNBNNx5L7V_bn
⚛️ React.js Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp1Rab71vx2zMF6qpwGDB2Z1&si=sDZRxsYNetYmojKd
💻 TypeScript Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp0xfHQFmlL52b_6-QZ0mnk_&si=c4jfsd5ElDC1p0A5
------------------------------------------------------------------------------------
💸 Get All My YouTube Videos' Source Code for just ₹199! Grab Now - https://thapatechnical.shop/source-code
📺 Watch the complete Node.JS Playlist here :https://youtube.com/playlist?list=PLwGdqUZWnOp3KELplHtc-RnJ5xTUPqdgH&si=_ob8F88HYxCdspup
🔥 Access Source Code, PPT & Notes here for Free : https://www.thapatechnical.com/2024/11/introduction-to-nodejs.html
------------------------------------------------------------------------
🚀 Boost Your Skills with these Pre-Requisite Videos:
🔗 Best HTML Course - https://youtu.be/5ccq_nLHneE
🔗 Best CSS Course - https://youtu.be/MSICFljRcb4
🔗 JavaScript Basics Course Part 1 - https://youtu.be/13gLB6hDHR8
🔗 JavaScript Advanced Course Part 2 - https://youtu.be/YwsOCN8woA8
------------------------------------------------------------------------
💸 Build Your Own E-commerce Website for Free! - https://www.thapatechnical.com/2024/03/build-complete-ecommerce-website-using.html
------------------------------------------------------------------------
✌️ Join Us!
🚀 Become a Member: Unlock perks, free source code, and more Join Now : https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join
📷 Connect on Instagram: https://www.instagram.com/thapatechnical
🗨️ Join Our Discord Server: Hang out with fellow programmers Discord Link: https://discord.gg/MdScmCsua6
------------------------------------------------------------------------
⌛TIMELINE⏳
0:00 - Intro to React Hook Form in Job Portal App
2:15 - How to Use React Hook Form (RHF) in Next.js
2:40 - Installing React Hook Form
2:55 - Understanding RHF Syntax & Setup
5:00 - Removing Old Registration Code
6:40 - Adding `register()` Function in Form Inputs
9:20 - The 4 Main Pieces of `useForm()` Hook
11:50 - `handleSubmit()` Explained with Example
12:40 - Adding Zod Validation in React Hook Form
15:10 - Installing @hookform/resolvers for Zod
16:05 - Handling Form Submission with RHF + Zod
17:20 - Using TypeScript Types in handleSubmit Params
18:15 - Handling Validation Errors on Frontend
20:30 - Testing Frontend Validation in Registration Form
20:40 - Task: Apply Same Logic to Login Form