@@AustinShelby He probably chose react-hook-form as the form library in their current project. Then the manager came and asked for a multi-step form and they got stuck. I don't feel that justifies firing anyone... but it's a possible scenario.
this is THE PERFECT video I was searching on yt. Your words are straight and clear and fits right into the mind. No fast forward, no timepass, just a perfect tutorial.
With the latest react-hook-version v7, you don't need to add CSS, values persist in the form even if you change the step. Thanks, Austin for your tutorial! it helps me a lot
@@josehuamanvalqui5663 just be sure you use the latest version v7, you will notice that when you are coding specifically the section where Austin use CSS.
You can just pass the 'hidden' attribute to any html tag instead of passing a classname, resulting in cleaner syntax. Amazing video. Pretty smart and simple implementation.
This video was SO incredibly helpful - thanks so much for this! I really appreciate the pace and the way you explained each step in such a succinct, clear way. You just saved me from a couple hours of potential headache, so thank you!!!
Only half way through but loving the video. Out of interest, do you need to use a ref to register the input? I've been using {...register('name', {required: true})} as an attribute and it seems to be working ok?
Thank you for watching. When I recorded this video the latest version of react-hook-form was 6. Now it's in version 7 where the syntax has changed a little bit. The way you are using it now is correct 👍.
thank a lot for thit tutorial, bro i have a question how will it be if you the sections in differents componet, i mean how will you acces to data in different form and submit them in a single, i'm really curious about knowing this
Trying to process what hiding parts of the form means for accessibility. Seems like keyboard users would still have the entire form read to them, even though the whole form is not visible at once for sighted users. Thoughts?
Thank you Irene for watching! JSON.stringify() takes 3 arguments. The object we want to stringify, a replacer function (we don't want this so we can just give null), and the amount of space for indentation for better readability. You can learn more here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Hi Austin, sorry for another question! When I move to the next step it seems to populate the next inputs with the previous values. Have you ever come across that behaviour?
Thanks for this tutorial! There is one inaccuracy though. When you play around with the forward and back buttons at some point the form gets submitted too early. When you go through all the steps and check the checkboxes then go back and then try to go to the next step again the form actually gets submitted. Any idea on how to solve this?
I'm having a problem with taking a multiple choice test with multiple questions in sections and don't know how to solve it? can you help me with the solution?
Hi Austin, there is a big mistake in your code! If I jump from the 3rd step again to the 1st step - then afterwards the value in the 2nd step is missing! What is the reason for this? Best regards Markus
I can't believe it. You just saved me from being fired!
Haha, how did that happen?
@@AustinShelby He probably chose react-hook-form as the form library in their current project. Then the manager came and asked for a multi-step form and they got stuck.
I don't feel that justifies firing anyone... but it's a possible scenario.
this is THE PERFECT video I was searching on yt. Your words are straight and clear and fits right into the mind. No fast forward, no timepass, just a perfect tutorial.
With the latest react-hook-version v7, you don't need to add CSS, values persist in the form even if you change the step. Thanks, Austin for your tutorial! it helps me a lot
That works out of the box or you need to add some extra configuration?
@@josehuamanvalqui5663 just be sure you use the latest version v7, you will notice that when you are coding specifically the section where Austin use CSS.
@@yerson557 if it is an input checkbox, it will repeat the results in the previous section and I don't know how to solve it now?
You can just pass the 'hidden' attribute to any html tag instead of passing a classname, resulting in cleaner syntax.
Amazing video. Pretty smart and simple implementation.
Very well done and extremely simple not too many third party libraries. Thank you this is what I was looking for
Thanks for watching and I'm glad you found my teaching style helpful!
The best I've seen so far. Thanks Austin.
Amazing tutorial with simple and step by step explanations on complex, multi step form, Thank you Austin.
This the for the old Version of react-hook-form v6. The same video with TypeScript + rhf v7 would have been a real gem as there isn’t one on TH-cam.
That sounds like a good idea, maybe I'll make one
@@AustinShelby Looking forward to it!
Great multi step form tutorial. 👍👋❤️😍
This really helped me! Thank you, Austin!
You make great videos man! Currently learning NextJS with tailwind and I love what you're doing. Keep it up!
Thanks for producing this awesome tutorial!
Jusst awesome! You are a life saver Austin! I will definitely checkout your tailwind video. Thanks again.
I'm glad you could learn something!
This video was SO incredibly helpful - thanks so much for this! I really appreciate the pace and the way you explained each step in such a succinct, clear way. You just saved me from a couple hours of potential headache, so thank you!!!
Awesome! Glad to hear that!
Nice tutorial! pretty straightforward, now I'm gonna try to separate each step in different files
Thank you Austin! Exactly what I needed! Clean explanation! Cheers man!
Glad you learned something! Thanks for watching
Nice, this just save me a lot of research on how to do it. thanks
Love this video!
Question: can we use yupResolver with this strategy?
Only half way through but loving the video. Out of interest, do you need to use a ref to register the input? I've been using {...register('name', {required: true})} as an attribute and it seems to be working ok?
Thank you for watching. When I recorded this video the latest version of react-hook-form was 6. Now it's in version 7 where the syntax has changed a little bit. The way you are using it now is correct 👍.
@@AustinShelby Perfect, and thanks for the quick reply!
this is exactly what I needed.
Gracias
thank a lot for thit tutorial, bro i have a question how will it be if you the sections in differents componet, i mean how will you acces to data in different form and submit them in a single, i'm really curious about knowing this
great work man !
Thank you dude , it's awesome
Trying to process what hiding parts of the form means for accessibility. Seems like keyboard users would still have the entire form read to them, even though the whole form is not visible at once for sighted users. Thoughts?
Thank you so much, Austin!
Is there another way to hide the forms when we press next other than using tailwind css
time savior !
Thank You Sir
Cool. What about adding logic between the forms?
Thanks for this amazing tutorial.
Thank you.
It was awesome!! Thank you so much!
Just one question, what does the "null, 2" mean?
Thank you Irene for watching! JSON.stringify() takes 3 arguments. The object we want to stringify, a replacer function (we don't want this so we can just give null), and the amount of space for indentation for better readability. You can learn more here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Thanks bro!!!
Thank you for watching Ale! I'm glad you learned something. :-)
Would love to see the same video with TS + React Hook Form v7 + Material UI + Tailwind :)
Nice tutorial mate. Can you do the same with Next.js and the next router. So each step of the form will be a new route?!?
Hey Zlatko thanks for watching the video. That sounds like an interesting topic for a tutorial, I'll consider it
Hi Austin, sorry for another question! When I move to the next step it seems to populate the next inputs with the previous values. Have you ever come across that behaviour?
Excellent. Thanks a ton. Subscribed.
If it's a series of multiple choice questions, how should we solve it?
Muito bom!, conseguir entender e aplicar a um projeto real, mesmo sem ouvir o áudio ou ver as legenda, obrigado!
Thank you so so so Much !!!!!
Thanks for this tutorial! There is one inaccuracy though. When you play around with the forward and back buttons at some point the form gets submitted too early. When you go through all the steps and check the checkboxes then go back and then try to go to the next step again the form actually gets submitted. Any idea on how to solve this?
Did you find the solution to the problem?
I'm having a problem with taking a multiple choice test with multiple questions in sections and don't know how to solve it? can you help me with the solution?
I think there is a v7 update change a lot =) can you redo a video to keep it easy to follow?
Could you create this same thing using bootstrap or antd instead of tailwind ?
Hi Austin,
there is a big mistake in your code!
If I jump from the 3rd step again to the 1st step - then afterwards the value in the 2nd step is missing!
What is the reason for this?
Best regards
Markus
This will work with zod? I tried it with zod but i cannot get to step 2 cause my step 2 fields also validated when clicking next to step 2.
The way I showed it in this video won't work with zod. If you want to use zod I would make each step a separate form with their own validation.
How to do? if I need check on unique email for registration in first step?
u change only text and u have 2 different buttons thats .....
there are millions of files on github
Please don't make render functions which you then call inside of your page render. That's an anti-pattern; use react components. {formStep > 2 && }
Your repo is outdated
That's true this video is already two years old. I might remake this tutorial with the latest tools and best practices.
thanks man