Next JS forms with Shadcn UI (the EASY way)

⭐️ webdeveducation.com
Next JS 14 how to validate forms with shadcn ui and build beautiful forms with shadcn ui, next js form validation, next js zod, next js react-hook-form
THE SHADCN UI COURSE IS NOW AVAILABLE - GET IT FOR JUST $12.99 BELOW!
www.udemy.com/course/shadcn-u...
Github repo:
github.com/tomphill/shadcn-fo...
🔔 Subscribe if you want more free tutorials like this one! kzread.info...
#nextjs14 #zod #reactjs #shadcn #reacthookform

Пікірлер: 77

  • @WebDevEducation
    @WebDevEducation6 ай бұрын

    I was sick when recording this so do me a favour and give the video a thumbs up 👍😂

  • @ismaeltinta6118

    @ismaeltinta6118

    6 ай бұрын

    haha, I gave it a thumps up

  • @WebDevEducation

    @WebDevEducation

    6 ай бұрын

    @@ismaeltinta6118 thank you sir! 😊

  • @molomekeys3938

    @molomekeys3938

    4 ай бұрын

    nevermind it's a wonderful vidoe thank you sir

  • @bhavyakothari635

    @bhavyakothari635

    4 ай бұрын

    Definitely mate. What a great video and the way you quickly explained it. No BS just pinpointed. Great video man. +Subscribed.

  • @AnsgarSteinkamp
    @AnsgarSteinkamp6 күн бұрын

    Brilliant tutorial, explained really well - thanks a lot! Hands down the top guide for shadcn and forms out there!

  • @rikisyahputra3805
    @rikisyahputra3805Ай бұрын

    When you set the account-type to 'company' and fill in the company name field, and then change the account-type to 'personal', and then submit the form, the company-name will still be logged in the console, even though the account-type is already changed to 'personal' and the company-name field is no longer exist. This is probably not a problem on most use-case, but I think this is worth noting.

  • @eric_so_good
    @eric_so_good5 ай бұрын

    hey man i just went back after realized I haven't thank you about how straight forward this was! Thank you.

  • @mohdali-yq8gq
    @mohdali-yq8gq6 ай бұрын

    I am really thankful for your consideration and hope that in near future you will bring the full stack course in next js sometime like ecommerce or expenses tracker or something like LinkedIn or anything you like where more and more concepts of front end and backend are covered.

  • @tsykin
    @tsykin7 күн бұрын

    Thank you so much for suc a clear explanation!

  • @nonada2251
    @nonada22516 ай бұрын

    Thank you very much, I finally managed to understand how to use these tools :)

  • @naylord5
    @naylord56 ай бұрын

    Thank you so much for sharing mate! I hope you get well very soon 🙌🙌

  • @WebDevEducation

    @WebDevEducation

    6 ай бұрын

    You're welcome man and thank you 😊🙏

  • @oussamazerroug8171
    @oussamazerroug81713 ай бұрын

    Amazing it's exactly what I was looking for ❤

  • @bobbyboxer2664
    @bobbyboxer266427 күн бұрын

    Amazing video! Thank you so much 🙏🏼

  • @ibrahimcious
    @ibrahimcious5 ай бұрын

    What a great explanation! Subscribed!

  • @WebDevEducation

    @WebDevEducation

    5 ай бұрын

    Thank you 😊 🙏

  • @AddictedGamerr
    @AddictedGamerrАй бұрын

    Love it straight to point but i make a vidoe with phn field with all the country code and validation

  • @coolcubestudio
    @coolcubestudio5 ай бұрын

    Helpful! Thank you!

  • @ONEOTPOfficial
    @ONEOTPOfficial2 ай бұрын

    it was really very helpfull man

  • @prapathsuayroop2341
    @prapathsuayroop23413 ай бұрын

    Thank you very much for your effort to make a good explanation of the great content, It made I've more understanding in the Next JS form., finally subscribed and planned to get your course of NextJS on Udemy as well.

  • @WebDevEducation

    @WebDevEducation

    3 ай бұрын

    Thank you 🙏 my next js courses on udemy are still using the pages router at the moment but I'm working on updating them all to use the app router 🙏

  • @GabrielMPereira
    @GabrielMPereira4 ай бұрын

    Great video! Thank you a lot

  • @ItsMeBenny
    @ItsMeBenny2 ай бұрын

    Great video !

  • @debarshidas8678
    @debarshidas86782 ай бұрын

    Thanks man! ♥

  • @Adrian_Galilea
    @Adrian_Galilea4 ай бұрын

    Fantastic video, appreciate that you drop the code too. I think if you now went ahead and you did a part 2 implementing this with next-safe-actions and server validation you'd have a very robust modern implementation. It's how I implemented it and there's 0 content available for the full example.

  • @AzamShaikh-gs1kc
    @AzamShaikh-gs1kc6 ай бұрын

    Appreciate it Sir Thanks

  • @quokka8687
    @quokka868712 күн бұрын

    Very helpfull!

  • @buraxta_
    @buraxta_5 ай бұрын

    it's so clear and useful. thank you

  • @froggysan5203
    @froggysan52034 ай бұрын

    Thanks a lot i am in the process of making my first react project and i looked everywhere for some good docs that explain how to make a custom validation and i couldn't find any, but you are not only showing us how, you are also explaining it step by step which is great for people like me who's first language isn't English, thanks a ton, also just a request can you show us how to upload more than one image file with typescript too? Thanks

  • @ervczek
    @ervczekАй бұрын

    Hi! Thank you so much for the tutorial, it's been very helpful for me as I'm currently building my first project using shadcn :) Will you also make a tutorial on using something like nodemailer to build on top of this example, so the contact form can be sent to an external email address?

  • @RR-rw5bc
    @RR-rw5bc6 ай бұрын

    Good job 👏

  • @WebDevFreelancer4
    @WebDevFreelancer46 ай бұрын

    Thank You😊

  • @aqarcity
    @aqarcity3 ай бұрын

    Thank you very much

  • @cesarquispe2413
    @cesarquispe241326 күн бұрын

    Hey great video! I was wondering how did you know where to "insert" the FormControl component in between the Select component anatomy? I've been working on the Combobox component and trying to make it work in a form. I've done a first version of it but yours with the Select seems cleaner.

  • @UtkarshWasHereBeforeYou
    @UtkarshWasHereBeforeYou2 ай бұрын

    You're the best

  • @mohdali-yq8gq
    @mohdali-yq8gq6 ай бұрын

    Great Explanation!! Sir please can you post a full stack video with an extensive use of shadcn and shadcn form and use the PostgreSQL as a backend with prisma.

  • @WebDevEducation

    @WebDevEducation

    6 ай бұрын

    I'd love to do that - do a massive build similar to how sonny sangha does his videos / builds. Hopefully if I have more time in the future I can do more of those types of videos 🙏

  • @ChamaraHarindra
    @ChamaraHarindra4 ай бұрын

    Thnx for the lesson. Do you know how to make shadcn select to get focused on error? It happens correctly for input. But doesn't happen as expected in select and radio group.

  • @psmontte
    @psmontteАй бұрын

    How do you validate data again in server function?

  • @user-lv3cj7ky1x
    @user-lv3cj7ky1xАй бұрын

    Hi Tom Philips I tested this form, it is rendering multiple times unnecessarily including “render” prop method and also entire component(page.tsx). When we use “react-hook-form” it manages form state internally, but here re-renders happening on every keystroke. Could please help me how to avoid unnecessary re-renders?

  • @shajiths7727
    @shajiths77275 ай бұрын

    hey how would you do the same for files im trying to do it but facing some difficulties itll be helpful if could give a sample. Thank you

  • @codeyalaya
    @codeyalaya2 ай бұрын

    how to show #contact section of a long page, after submitting form using server actions with js disabled. #contact section is at last of the page.

  • @mezza3890
    @mezza38903 ай бұрын

    Does anyone know why I get a hydration error whenever I use more than a single FormField within the form?

  • @chinmayghule8272
    @chinmayghule82723 ай бұрын

    There are quite a few videos on shadcn on KZread but none of them go deep and show how some of the complex shadcn components are to be used, like Form for example. I hope you also do a video on the DatePicker shadcn component as well. It seems to have a problem regarding manually typing dates. For example if you want to select your birth date, then you'll have to click a lot of times to get to your birth year.

  • @WebDevEducation

    @WebDevEducation

    3 ай бұрын

    Already covered that in my shadcn ui calendar video 😊🙏

  • @techiesakar
    @techiesakar6 ай бұрын

    Triggering Select Button hides the Scrollbar. How to avoid this behaviour ?

  • @gahaIor
    @gahaIor5 ай бұрын

    HelloHi, what would be your approach if you wanted the text field to be filled from a variable instead of typing it manually, I made some attempts and it shows it correctly in the front end ( value={var} ), but when I submit the form it tells me that it is empty.

  • @WebDevEducation

    @WebDevEducation

    5 ай бұрын

    It sounds like what you need is to set the fields default value.

  • @hollycow8171
    @hollycow8171Ай бұрын

    Can you do same without ShadeCDN. this is so cool

  • @avrakadavra1552
    @avrakadavra15524 ай бұрын

    8:49 intellisense is not working, Any solution?

  • @benjamincarriou8497
    @benjamincarriou84973 ай бұрын

    Hi and thx How to reset the form after submission ?

  • @ruanxun9454

    @ruanxun9454

    2 ай бұрын

    in the function handleSubmit, I write form.reset() to clear all the inputs, but I am still a newbie, it may not be the best way.

  • @codyoakes
    @codyoakes6 ай бұрын

    What about with inputs other than string? numbers, dates, bigint? I'm a little confused what the best way to handle this is in the Shadcn ui, zod, react-hook-form space is...

  • @user-cz9hx3ox1u

    @user-cz9hx3ox1u

    5 ай бұрын

    Check over the zod documentation

  • @codyoakes

    @codyoakes

    5 ай бұрын

    @@user-cz9hx3ox1u I have been looking over the zod docs, but it seems like the shadcn components make everything strings on submit (seems like this is a RHF behavior?) so the values can't be validated as numbers or dates in zod...were you able to get this to work? Any chance you can share a codepen/github repo? I'd love to see how it's done. Thanks!

  • @juan7114

    @juan7114

    5 ай бұрын

    ​@@codyoakesYou need to set the onChange value, if you need a number instead of string, just set onChange = ({target}) => field.onChange(field.value = +target.value) "+" Operator is a shorthand for Number(), so you can also use Number() if you want. Remember, input value is always a string, convert it to a number and then assign it to the field value.

  • @OmarAfet
    @OmarAfet4 ай бұрын

    That was great! but how can I do a server action?

  • @WebDevEducation

    @WebDevEducation

    4 ай бұрын

    As far as I'm aware this method will only work by calling the server action from the submit handler, rather than as the form action.

  • @Videoguy789
    @Videoguy7895 ай бұрын

    Huh so I am still pretty new to web development and I realized that I don't really have much experience building forms. But this form management with ShadCN looks unnecessarily complicated - is it even more complicated if you decide not to use ShadCN and would build it with just React?

  • @WebDevEducation

    @WebDevEducation

    5 ай бұрын

    I'd say it's easier not to use shadcn or react hook form, but then for bigger forms it's a lot easier for your forms to become complicated. Once I learned the "rules" for building forms with shadcn and react hook form, I've found it so much easier to build and maintain forms but that's just me. If you're new to web dev I'd recommend trying to build as much as you can from scratch yourself before working with third party libs.

  • @tomich20

    @tomich20

    5 ай бұрын

    So much inecessary boiler plate. What about creating a MultiSelect dropdown? u r screwed. anywho... U can use shadCn, Zod, and shadCn inputs just by using the {...register("element")}, there you wont need any of the stuff imported from . Keep away from it, is evil.🤪🤪

  • @user-wr7ou8ih5s
    @user-wr7ou8ih5s4 ай бұрын

    What about file input or rich text editor 🤔 How ?

  • @WebDevEducation

    @WebDevEducation

    4 ай бұрын

    No different, same approach 🙏

  • @d4rzk252
    @d4rzk2523 ай бұрын

    Great video just want to ask when the user takes the steps: 1. He clicks on the company 2. Fills in the input 3. Switches back to personal 4. Sends So accoutType - personal is set, but companyName is also set... It also sends comapanyName... Is there any way to prevent this? I don't think this should be happening

  • @d4rzk252

    @d4rzk252

    3 ай бұрын

    I just did this: .refine( (data) => { if (data.accountType === 'company') { return !!data.companyName } data.companyName = ''"

  • @WebDevEducation

    @WebDevEducation

    3 ай бұрын

    I would prefer to take the approach of on submit, just not sending the company name data etc to the server.

  • @d4rzk252

    @d4rzk252

    3 ай бұрын

    @@WebDevEducation So I have to do this logic in the function and then submit it? Isn't there a way to do it through the zod that when this is active, this get deleted? Or just like this: if (values.accountType === 'personal') delete values.companyName console.log({ ...values }) ?

  • @slavenDj
    @slavenDj5 ай бұрын

    Is it possible to use shadcn for file input?

  • @WebDevEducation

    @WebDevEducation

    5 ай бұрын

    Yes should work :)

  • @maykon-oliveira
    @maykon-oliveira6 ай бұрын

    Just add a input type date, and everything breaks 😅

  • @user-cz9hx3ox1u

    @user-cz9hx3ox1u

    5 ай бұрын

    I think that's a zod issue

  • @programwithalex
    @programwithalex3 ай бұрын

    why is a simple form so complex 😢😢

  • @WebDevEducation

    @WebDevEducation

    3 ай бұрын

    welcome to React 😂

  • @programwithalex

    @programwithalex

    3 ай бұрын

    lmao, thanks for the video btw@@WebDevEducation

  • @anhvuuc8693
    @anhvuuc86936 ай бұрын

    Build form is never easy, I think. This is just a simple form.

  • @WebDevEducation

    @WebDevEducation

    6 ай бұрын

    Using shadcn / zod / react-hook-form 100% makes it easier