Build a Multistep Form in NextJs Using react-hook-form and ZOD

[@MiladJoodi]

You really explain things easily. I believe that some people are born to be teachers.🙌✨

[@hamedbahram]

Thank you!

[@raillyhugo3287]

Thank you, that's what exactly I was looking for. Concise and clear explanation! Keep up the good work!

[@hamedbahram]

Great to hear that!

[@longsuabc]

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! 💪💪✨✨👍👍👏👏

[@hamedbahram]

Great to hear that! Welcome to the channel.

[@BreadfortheSoul-lb3zr]

Thank you for taking the time to share this. The Lord Jesus bless you.

[@hamedbahram]

My pleasure! Glad it helped.

[@jeremiahchinwe1336]

This video has really helped me achieve my task

[@hamedbahram]

Very glad to hear that.

[@INetreba]

Thank you! I like your vibe

[@hamedbahram]

Anytime!

[@almaducatel5830]

Thank you verry much for your time. You are a blessing.

[@hamedbahram]

You are very welcome!

[@leonardorocchini9012]

Nice video. that would be great to implement app routing in the multistep form so that we have a separate page for each step.

[@hamedbahram]

For sure!

[@raymondmichael4987]

🤔🤔 actually that’s a good idea, I have several ways to leverage it “I guess “😊

[@alexavery8182]

Hamed always delivers great content

[@hamedbahram]

Appreciate that!

[@sundayucheawaji6206]

Thanks for this. It was really helpful.

[@hamedbahram]

Glad it was helpful!

[@yogawithaaron]

This video was tremendously helpful. Ty!

[@hamedbahram]

Glad it was helpful!

[@irfansaeedkhan7242]

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

[@hamedbahram]

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.

[@raymondmichael4987]

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 😊

[@raymondmichael4987]

@@hamedbahramthanks man, keep them coming ❤

[@OutrospectiveOfficial]

Excellent content, thank you!

[@hamedbahram]

Glad it was helpful!

[@ammarhaidar5995]

Awesome, just in time🎉🎉, appreciate your content, thanx.

[@hamedbahram]

Glad to hear that!

[@alir8zana635]

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

[@hamedbahram]

You're very welcome! I'm glad it helped, and I appreciate your comment!

[@htetlinlinnaing4994]

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!

[@hamedbahram]

My pleasure! Do you mean adding conditional steps?

[@htetlinlinnaing4994]

@@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!

[@raymondmichael4987]

I think you mean handling fieldArray 😊. it’s a good one to learn from expert.

[@yasserhy]

As always, brilliant video ❤

[@hamedbahram]

Thank you! Cheers!

[@almaducatel5830]

As always He save me.

[@alextwin200e3]

Thank you very much! It helped me a lot. Great content!

[@hamedbahram]

You're welcome! Glad it helped!

[@ivandamyanov]

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.

[@hamedbahram]

Tell me more... are you using a UI library for your custom components?

[@kyle-andrewgovinder9902]

Always providing us with amazing content, Hamed It's safe to say you taught me everything I know about Next

[@hamedbahram]

Glad to hear that! I appreciate your comment.

[@hqasmei]

Another great video, thanks Hamed!

[@hamedbahram]

I appreciate it, Hosna! What is similar to how you implemented it?

[@siebe681]

This was something I was searching for! Thank you!

[@hamedbahram]

You're welcome!

[@imkir4n]

Wow i was looking for the same🔥

[@hamedbahram]

There you have it!

[@kristian970]

Great video! Thank you!

[@hamedbahram]

You're welcome!

[@usamausman5225]

Please make a complete series on Next 14

[@hamedbahram]

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.

[@YasamanKarbasi]

THANK UUU

[@hamedbahram]

Anytime!

[@SanderCokart]

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.

[@hamedbahram]

Maybe have them as different components and lazy load the components and pass the promise to the form component. Just thinking out loud here...

[@tomasburian6550]

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?

[@hamedbahram]

Yes you can have custom validation for each field.

[@arezootony9715]

Amazing video. How do we disable the buttons in each step if the required fields are not filled ?

[@hamedbahram]

Thank you! You can look at the `formState` returned from the `useFrom` hook.

[@arezootony9715]

@@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.

[@hamedbahram]

​@@arezootony9715 seem like the solution would be to have separate forms for each step and hold the collected data in a global state.

[@arezootony9715]

@@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.

[@hamedbahram]

@@arezootony9715 you need to lift the state of the form up to the parent or a global state.

[@leilamohamadpor3481]

خیلی عالی بود.این چیزی بود که من الان داشتم دنبال آن می گشتم من یک فرم با تعداد خیلی زیادی المنت دارم که باید مقادیر آنها را از کاربر دریافت کنم آیا به نظر شما لازم است که از state management ها استفاده کنم؟ اگر راهنمایی ب فرمایید ممنون می شوم

[@hamedbahram]

Khoshhaalam Leila Jan! Welcome to the channel 🙂

[@trusht]

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?

[@hamedbahram]

That's great idea Tacettin! I'd love for you to contribute to this project. Open a PR for the storage.

[@dosamuel-mb]

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 ?

[@hamedbahram]

Clone my code and see what you're doing differently.

[@saiguna6676]

Thank you for the amazing video but if i have optional fields it's not working for that one how to solve it sir

[@hamedbahram]

What is an optional field, one that's not required you mean?

[@user-gm3lg8gp3m]

thank you

[@hamedbahram]

My pleasure!

[@kyleroath]

I know this weird, but I kept thinking like damn that chair looks comfy. Can anyone identify which chair that is?

[@hamedbahram]

Haha 😅 Its from IKEA, the model name is Markus.

[@kyleroath]

@@hamedbahram ha thank you sir. sorry for the weirdness, thanks for the vid too!

[@hamedbahram]

@@kyleroath no worries!

[@davidfarah]

Thanks

[@hamedbahram]

You're welcome!

[@AmitErandole]

What if we need to show errors while the user is typing? Do we enable the onChange mode on react hook form?

[@hamedbahram]

You can set the mode to onChange or separate the steps to individual forms.

[@AmitErandole]

@@hamedbahram ok will try that. Thank you for sharing your repos. They are quite helpful

[@kennethlau8108]

If we add a file upload input for example in step2 clicked next tp step3 and click back. It will have an error.

[@hamedbahram]

Yeah this isn't a one-size-fits-all solution, you'd have to handle file inputs probably with separate forms for each step.

[@kennethlau8108]

@@hamedbahram any recommended ways to do so ?

[@hamedbahram]

@@kennethlau8108 watch this → kzbin.info/www/bejne/eZaknKuMrNisg7c

[@dogcodes]

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

[@hamedbahram]

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.

[@dogcodes]

@@hamedbahram Thank you!

[@imkir4n]

12:05 hamed why the error is keep complaining even after user entered into the field?

[@hamedbahram]

You can set the `mode` to `onChange` to update the error as the user corrects it.

[@imkir4n]

@@hamedbahram Thanks it worked. But Will this lead to multiple re-renders?

[@hamedbahram]

@@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.

[@dhirajavasthi6539]

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

[@hamedbahram]

Not sure if I understand that. Zod is for validating or parsing an object, what do you mean by reading a json file?

[@abdulmalikzihad3542]

Will the 2nd step submit the automatically?

[@hamedbahram]

Yes if it passes the validation it submits the form.

[@navjotsingh2457]

tysm

[@hamedbahram]

?

[@juniorsemerzier660]

how to remove the error message after the correction of the input value?

[@hamedbahram]

You can pass mode: "onChange" to the `useForm` hook.

[@codingwithlucy]

@@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?

[@hamedbahram]

​@@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?

[@AravindK-tv5rh]

@@hamedbahram Isn't there any other way? like how it works normally in react hook form for a normal form...

[@hamedbahram]

@@AravindK-tv5rh I'm not aware of any other way! Let me know if you could come up with something else from the docs.

[@OmarDugha-o6l]

❤❤❤

[@hamedbahram]

❤️

[@dolapojohnsonn]

Nice content. But can I get access to the github repo please?

[@hamedbahram]

Link to repo is in the video description.

[@dolapojohnsonn]

@@hamedbahram Thank you, I'm grateful

[@АнтонКобелев-з5ъ]

Do you have this code on git hub?

[@hamedbahram]

Yes the link is in the video description.

[@mathuraditya7]

Hey, have you tried @rafty/ui for UI?

[@hamedbahram]

Unfortunately not!