Build a Multistep Form in NextJs Using react-hook-form and ZOD
Вставка
- Опубліковано 16 лип 2024
- This video will look at building a multistep form in NextJs (React) using react-hook-form for form state, ZOD for schema validation, and framer motion for animation between steps.
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...
👉🏼 Project source code (GitHub)
🔗 github.com/HamedBahram/next-m...
👉🏼 Work with me
🔗 www.hamedbahram.io/hire
Chapters
0:00 Intro
0:44 Project setup
1:40 Add the form shell
6:30 Add react-hook-form
10:00 Add form validation
15:30 Add animation
20:10 Recap - Наука та технологія
Thank you, that's what exactly I was looking for. Concise and clear explanation! Keep up the good work!
Great to hear that!
thank you so much for this video
it really helped me implement it in my own project
your videos are great and I hope you great success
You're very welcome! I'm glad it helped, and I appreciate your comment!
Really great and amazing video.
Very clear explanations all the time. I am not a native English, but I can hear his English very clearly!!
I respect you and your business!!!
Cheers!!!
From China! 💪💪✨✨👍👍👏👏
Great to hear that! Welcome to the channel.
Another great video, thanks Hamed!
I appreciate it, Hosna! What is similar to how you implemented it?
This was something I was searching for! Thank you!
You're welcome!
Awesome, just in time🎉🎉, appreciate your content, thanx.
Glad to hear that!
Hamed always delivers great content
Appreciate that!
As always, brilliant video ❤
Thank you! Cheers!
As always He save me.
Thank you very much! It helped me a lot. Great content!
You're welcome! Glad it helped!
This video was tremendously helpful. Ty!
Glad it was helpful!
Thank you verry much for your time. You are a blessing.
You are very welcome!
This video has really helped me achieve my task
Very glad to hear that.
Great video! Thank you!
You're welcome!
Wow i was looking for the same🔥
There you have it!
Thanks for this. It was really helpful.
Glad it was helpful!
Thank you for taking the time to share this. The Lord Jesus bless you.
My pleasure! Glad it helped.
Always providing us with amazing content, Hamed
It's safe to say you taught me everything I know about Next
Glad to hear that! I appreciate your comment.
Nice video. that would be great to implement app routing in the multistep form so that we have a separate page for each step.
For sure!
🤔🤔 actually that’s a good idea, I have several ways to leverage it “I guess “😊
Thank you for your amazing Next.js content! If you have time, could you make a tutorial on adding/removing multiple fields dynamically on button click? It would be super helpful!
My pleasure! Do you mean adding conditional steps?
@@hamedbahram I meant a form where I can add or remove multiple fields dynamically, like adding or removing phone number fields on button click. Thank!
I think you mean handling fieldArray 😊.
it’s a good one to learn from expert.
THANK UUU
Anytime!
Thanks for the great video. I really like react-hook-form but there seem to be very few videos about an important integration - custom inputs + react hook form. I read 3 different articles for different versions of the library and it is all implemented differently and some things don't work. Especially with a Typescript environment. I like that library but it proves to be very complicated for beginners to use it in a reusable way (custom components). Would be awesome if you could do a short video on that or redirect me to any good example you might know of for the latest version.
Tell me more... are you using a UI library for your custom components?
thank you
My pleasure!
Thanks
You're welcome!
Thanks sir for the detailed explanation. I have tailwinds subscription so decided to apply this to my app. I am thinking to save input data to local storage just in case if the user navigates away with tons of information typed and when they come back to the form without frustration. What do you think?
That's great idea Tacettin! I'd love for you to contribute to this project. Open a PR for the storage.
tysm
?
Please make a complete series on Next 14
Everything is the same in NextJs 14, nothing has changed :) The only change is that server actions are now stable. But I'll make a video reviewing the release.
❤❤❤
❤️
We need a version that cam scale infinitely using lazy and pre loading but idk how you preload component 3 while component 2 is showing for example.
Maybe have them as different components and lazy load the components and pass the promise to the form component. Just thinking out loud here...
Thank you for the amazing video but if i have optional fields it's not working for that one how to solve it sir
What is an optional field, one that's not required you mean?
Amazing video. How do we disable the buttons in each step if the required fields are not filled ?
Thank you! You can look at the `formState` returned from the `useFrom` hook.
@@hamedbahram I tried isValid and isDirty but they do not work properly and I think the reason is they are matching with the whole Zod schema and not the items on the page.
@@arezootony9715 seem like the solution would be to have separate forms for each step and hold the collected data in a global state.
@@hamedbahram yes, that is exactly how I was doing with the forms I have. My only problem is keeping the form state when the user goes back to the previous form/step and see the form filled.
@@arezootony9715 you need to lift the state of the form up to the parent or a global state.
What always gives me hard time is trying to figure out some extra features that would fit into the process because as a pro I tend to get tasks that are easily out of the ordinary use case. For example, I want the user to input his company number on the first step and then not only validate that the input is not empty, but also that the number they provided is real and not made up.
Is there a way to run a custom function for each step that would do something before it would let the user go on to the next step?
Yes you can have custom validation for each field.
Hello, i added a button to submit the data to the API, but i can't even see my data in the console, i can't even log them and there is no error at all. Can someone help please ?
Clone my code and see what you're doing differently.
Is there a way to remove the validation error message when the user inputs again after validation. So after the "is required" is shown then when I type again that message is not rendered
You can pass `mode:"onchange"` or if you don't want to trigger state update on change, you can separate each step to an individual form and hold a global state for all the steps.
@@hamedbahram Thank you!
If we add a file upload input for example in step2 clicked next tp step3 and click back. It will have an error.
Yeah this isn't a one-size-fits-all solution, you'd have to handle file inputs probably with separate forms for each step.
@@hamedbahram any recommended ways to do so ?
@@kennethlau8108 watch this → ua-cam.com/video/CeAkxVwsyMU/v-deo.html
Hello @hamedbahram your content is very helpful can you please help me in below problam using zod and next js 13 or 14
problem : How to read content of uploaded json file on react / next.js 13 or 14 using zod
Not sure if I understand that. Zod is for validating or parsing an object, what do you mean by reading a json file?
Will the 2nd step submit the automatically?
Yes if it passes the validation it submits the form.
I know this weird, but I kept thinking like damn that chair looks comfy. Can anyone identify which chair that is?
Haha 😅 Its from IKEA, the model name is Markus.
@@hamedbahram ha thank you sir. sorry for the weirdness, thanks for the vid too!
@@kyleroath no worries!
خیلی عالی بود.این چیزی بود که من الان داشتم دنبال آن می گشتم
من یک فرم با تعداد خیلی زیادی المنت دارم که باید مقادیر آنها را از کاربر دریافت کنم
آیا به نظر شما لازم است که از state management ها استفاده کنم؟
اگر راهنمایی ب فرمایید ممنون می شوم
Khoshhaalam Leila Jan! Welcome to the channel 🙂
how to remove the error message after the correction of the input value?
You can pass mode: "onChange" to the `useForm` hook.
@@hamedbahram I was just coming to ask the same question. What do you mean? Do you mean that on every form field you would use trigger on onChange?
@@codingwithlucy What I meant is to pass the `mode` property to the `useForm` hook like so ↓
```
const { register, trigger, ... } = useForm({
...
mode: "onChange"
...
})
```
Does this answer your question?
@@hamedbahram Isn't there any other way? like how it works normally in react hook form for a normal form...
@@AravindK-tv5rh I'm not aware of any other way! Let me know if you could come up with something else from the docs.
Do you have this code on git hub?
Yes the link is in the video description.
12:05 hamed why the error is keep complaining even after user entered into the field?
You can set the `mode` to `onChange` to update the error as the user corrects it.
@@hamedbahram Thanks it worked. But Will this lead to multiple re-renders?
@@imkir4n Yup it does. I don't know of any other way to watch the changes on the fields to wipe out the errors once we triggered the validation.
Nice content. But can I get access to the github repo please?
Link to repo is in the video description.
@@hamedbahram Thank you, I'm grateful
too much code in one component killed the main motive of react, it would have better to also show if each form is in different component because form could be bigger
This video is not so much about React component composition but more so about the concept of a multi-step form implemented using react-hook-form and zod for validation.
Using multiple forms for this lesson would have made the video too complicated for me.
I think for delivering the intended concept, he chose the best approach.
Once we understand the concept it’ll be much easier to na split the form into much smaller forms as we want and he mentioned it clearly 😊
@@hamedbahramthanks man, keep them coming ❤
Hey, have you tried @rafty/ui for UI?
Unfortunately not!