I'm completely new to pretty much all of this, but I love how you effectively explain every step so I can actually learn instead of just "know". Great job! c:
Thanks for the great video Elliot. I like to follow along and do something before diving too deep into docs, and this was well paced & easy to follow. Love how you concisely explain the meaning of the various methods/variables and how they relate to each other, that's unfortunately uncommon. Keep up the good work.
Great video, thank you. But there is an issue, if any input is invalid then you have to click the "Next Step" button twice. The first time it triggers form validation but since the function is async, it does not wait and input state does not pass the check. Adding async to the button onClick event and await on the form.trigger() will solve the issue.
With tRPC, you can infer the input and output of the procedures and you can use the same types for both server and client side validation. Great marriage between the two.
btw for the div you used to wrap the component that you put the min-h-screen on, you could just add grid and place content center and it would do the same, wouldnt need the div with the absolute position and translations
Hello thank you for this tutorial. It was so usefull for me. Can you tell me please, what the extension you are using that suggests you commands to write this gray color hints that popup when you are starting to type something. I will be so gratefull if you tell me 🔥🔥🔥
Amazing job, but i have a little question, how to define such a form by seperating several form components? Like personal informaiton, education, work experience, i want to do it in several modules.
hey, I just made a tutorial using the nextjs13's app router for a full stack production application ua-cam.com/video/vIyU4nInlt0/v-deo.html in my opinion there are still some integrations that needs to be added for the app router to be production ready. Right now there are still a lot of missing documentation and not much integrated libraries that supports the app router. Give it a few more months and I'm sure everything will be ironed out! :)
How can we avoid triggering validation for the second step (passwords) when clicking next step with an invalid input on the first step? You can see that when you for example don't enter the email and then click next step, the passwords validation also fires. Besides that, great video!
hmm good point, right now it's being hard coded to only 2 steps. If I were to design a 3 step form I would probably create a Higher Order Component to make it more dynamic...
Shadcn is not working for me. I can install it fine but if i use/install more then 4 5 shadcn components at a single page my react app crashes. Idk its wierd 😅
Amazing video thank you so much. I was procrastinating building a multi-step form bc I thought it was too much hassle, but you have saved me 🙌
I'm completely new to pretty much all of this, but I love how you effectively explain every step so I can actually learn instead of just "know". Great job! c:
This video is exactly what I was looking for. It deserves so much more recognition. Thank you!
Very thorough explanations my guy... thank you very much!
Thank you! I'm glad you enjoyed the tutorial :)
thats so cool, ill definitely be using this for my project!
:)) Glad that you found this helpful!
This is exactly what I was looking for. Great tutorial for building forms using React.
Glad it was helpful!
Thanks for the great video Elliot. I like to follow along and do something before diving too deep into docs, and this was well paced & easy to follow. Love how you concisely explain the meaning of the various methods/variables and how they relate to each other, that's unfortunately uncommon. Keep up the good work.
Great video, thank you. But there is an issue, if any input is invalid then you have to click the "Next Step" button twice. The first time it triggers form validation but since the function is async, it does not wait and input state does not pass the check. Adding async to the button onClick event and await on the form.trigger() will solve the issue.
Hi Lex, have you found any method to show if password and confirm the password do not match as a form error ?
this video is so underrated! kudos to you. very well explained. thank you
Awesome video, I love the fast pace style. I hate when videos spend so much time messing with the editor and writing code.
LMAOO thank you! I'm glad you enjoy the fast pace that I go out :)
shadcn is just too good haha. i was building out my project today and i am just thinking man, we gone long ways
broo for real tho haha… i’ve been trying to find the perfect ui frameworks for years and shadcn just fulfilled everything i ever wished for 🤭
You explained it really well. I see you spent time understanding every concept. Good job and thank you!
With tRPC, you can infer the input and output of the procedures and you can use the same types for both server and client side validation. Great marriage between the two.
Thank you! Your teaching is awesome.
Great Video Elliott!!! So clear and thorough in explanation... Thank you!
Glad it was helpful!
Amazing video, the best practice you implemented for toggle theme button is new to me. Cheers.
this video saved me so much debugging time i was using the standart Select version instead off the form Select vesrion thanks bro
This is an amazing video. I truly never want to make forms any other way.
hahahah thank you brother
Great video. The pace is perfect - not too slow and covering all the details. Can you do a video that uses the app router and RSC ?
Thank you! ua-cam.com/video/vIyU4nInlt0/v-deo.html I just created a full stack application using the app router and RSC
btw for the div you used to wrap the component that you put the min-h-screen on, you could just add grid and place content center and it would do the same, wouldnt need the div with the absolute position and translations
Thanks for this, it's easy to understand and follow along. Your explanations were very clear!
Thank you so much for this amazing video! I will be using this in my project :)
Such a beautiful tutorial
Wow this is actually so good.
Got to know something new today😮
Thanks mate good video
Glad you enjoyed!
I think also for the Confirm Password, you can use Refine to do this check and show the error on the control instead of using the Toast.
amazing!
Amazing content. However, i think the tailwind and framer motion part could have been a lot more cleaner.
Nice video. Got to learn something new.
thank you!
Awesome bro
Thank you bro :)
Was looking for a way to keep the state of inputs over re-render. Conditional rendering css is so much easier
Hello thank you for this tutorial. It was so usefull for me. Can you tell me please, what the extension you are using that suggests you commands to write this gray color hints that popup when you are starting to type something. I will be so gratefull if you tell me 🔥🔥🔥
Great video man, it's not yum but yup 24:46
Great ♥ Thanks so mush.
Buen video bro
Thank you!
多謝！
Awesome dude!
when we go to second step, the fields already shows validation error messages, which is not good. how can we fix that??
I think to center the form on the screen, it is better to just use className="h-screen flex items-center justify-center"
谢谢！
LOL you're welcome jerry :)
Amazing job, but i have a little question, how to define such a form by seperating several form components? Like personal informaiton, education, work experience, i want to do it in several modules.
Check what happens when you tab through the fields
Hi Elliott, is there any way to show a form error instead of toast if the password and confirm the password do not match?
How did u put the placeholder in select?
Have u try action for form? Its good?
Hey Mr. CHONG, can you build a production grade authentication nextjs project capable of handling up to 15million active users?
Hey is the app router good for building production applications for client
hey, I just made a tutorial using the nextjs13's app router for a full stack production application ua-cam.com/video/vIyU4nInlt0/v-deo.html
in my opinion there are still some integrations that needs to be added for the app router to be production ready. Right now there are still a lot of missing documentation and not much integrated libraries that supports the app router. Give it a few more months and I'm sure everything will be ironed out! :)
How can we avoid triggering validation for the second step (passwords) when clicking next step with an invalid input on the first step? You can see that when you for example don't enter the email and then click next step, the passwords validation also fires. Besides that, great video!
onClick={async () => {
const isValid = await form.trigger("name");
if (!isValid) return;
setFormStep(1);
}}
what is your font?
I wonder how would you do 3 steps?
hmm good point, right now it's being hard coded to only 2 steps. If I were to design a 3 step form I would probably create a Higher Order Component to make it more dynamic...
name font vscode , bro ?
Shadcn is not working for me. I can install it fine but if i use/install more then 4 5 shadcn components at a single page my react app crashes. Idk its wierd 😅
What is the font family?
I believe it's Inter, you can find it on google fonts
@@elliottchong Sorry, I was not clear. I wanted to know the font that you are using in your VSCode.
@@user-tq5wk9ib8qit’s “Space Mono”
Nice vídeo, but try to talk in -3x speed
Try Mantine UI and then thank me later.