React Hook Form in Login Form - Job Portal App | Zod Front-End Validation | Ep 22
๐ Learn how to build a **clean, type-safe login form** for your **JobPortal** app using **React Hook Form** + **Zod** validation in **Next.js**!
In this step-by-step tutorial we:
โ
Remove boilerplate code from the login UI
โ
Add `useForm` with the **Zod resolver**
โ
Register every input field (`email`, `password`)
โ
Show **real-time error messages** (required, pattern, minLength)
โ
Validate on the **frontend** before hitting the API
----------------------------------------------------------------------------------
๐ 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
------------------------------------------------------------------------
๐ Video Timelineโ
0:00 โ React Hook Form in Login Form (JobPortal)
1:10 โ Removing unnecessary code from login form
2:00 โ Pause & try it yourself!
2:20 โ MERN stack classes recap
2:40 โ Adding `useForm` hook in login form
4:20 โ Registering input fields with `register()`
6:20 โ Handling errors in login form
7:35 โ Testing login form errors live
8:20 โ Which errors to show users
8:50 โ Next video: Session-based authentication