Build a Form with Validation using Shadcn/ui - Step by Step

Поділитися
Вставка
  • Опубліковано 16 гру 2024

КОМЕНТАРІ • 55

  • @christopherdsmd
    @christopherdsmd 9 місяців тому +1

    Thanks for your help Bret! I used your MERN Stack tutorial to get started on my full stack project. Really appreicate your videos!

  • @maiv.xuan-vuong3300
    @maiv.xuan-vuong3300 8 місяців тому +1

    thanks , have you a nice day !

  • @josevelez6865
    @josevelez6865 Місяць тому +1

    very helpful! thanks!

  • @돌파장인
    @돌파장인 5 місяців тому +1

    Thank you so much for this amazing video! Your explanation is clear and very helpful. I appreciate the effort you put into making this content

  • @MuhammadTalha-d9z
    @MuhammadTalha-d9z 8 місяців тому +2

    Hey man, great tutorials, Can you please make a whole project from scratch video using Nextjs, Mongo, Prisma, etc

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  8 місяців тому

      Yes I am actually currently making one live on my channel. But, I will make a full project with that tech stack

  • @toppirl
    @toppirl 4 місяці тому

    Appreciate your time and the video, helped a lot!

  • @ben5219
    @ben5219 5 місяців тому +1

    Great Video. Thanks Brett.😀

  • @minter-07
    @minter-07 8 місяців тому +2

    awsome tutorial just one request sir can you please increase the text size or the zoom level please 😶‍🌫😶‍🌫

  • @teetanrobotics5363
    @teetanrobotics5363 9 місяців тому

    Would be awesome. if you could extend this to a multi-step form in a part 2 video.
    like onboarding details
    address, occupation, etc.

  • @justinrivera6749
    @justinrivera6749 3 місяці тому +1

    Definitely best tutorial I’ve seen for forms with shadcn, RHF and Zod. Curious if there’s a reason you validate passwords matching on the backend versus validating this on the client side? I’m just a hobby developer starting to learn about backend. Would it not be quicker to validate this as they’re filling out the form vs sending data to the backend and then waiting for an error response?

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  2 місяці тому

      Hi thanks for the kind words! Best practice is to check if passwords match on both the client and server side. I am pretty sure you can use React Hook Forms for client side validation. Also, you should check it in backend before sending to your database.

  • @GregPeters1
    @GregPeters1 9 місяців тому +1

    Great series!!!!

  • @lostinthenarrativve
    @lostinthenarrativve 8 місяців тому +1

    Hey boss, which of your videos should I begin with if I'm an absolute beginner web developer with the basics of Javascript and react? I don't really know anything server-side, next, databases or anything. thanks.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  8 місяців тому

      I would recommend Brad Traversy at Traversy Media. He has really good beginner videos for React

  • @sujaypaul4542
    @sujaypaul4542 7 місяців тому +1

    that is a very simple and good tutorial, thnx

  • @adityashinde7815
    @adityashinde7815 5 місяців тому

    Amazing explanation

  • @skverskk
    @skverskk 7 місяців тому +1

    Nicely done

  • @nico-y9i
    @nico-y9i 5 місяців тому +1

    does this makes component rerender on every keystroke since shadcn-ui uses controlled component?

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  5 місяців тому +1

      No, it does not make the component re-render on every keystroke. Shadcn-ui uses react-hook-form under the hood. I will link the react-hook-form docs and if you scroll down a bit on the page, they have a demo on when the component would re-render. react-hook-form.com

  • @fikriilhamarifin96
    @fikriilhamarifin96 9 місяців тому +1

    how do you fetch defaultValue from api?

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  9 місяців тому

      It does automatically by passing in the values to your server action or your API endpoint. If you are using the Form component from Shadcn/ui

    • @fikriilhamarifin96
      @fikriilhamarifin96 9 місяців тому

      @@brettwestwooddeveloper can you make a video to demonstrate it? I still don't understand

  • @CodeX-P2
    @CodeX-P2 3 місяці тому +1

    Legend

  • @alexdin1565
    @alexdin1565 9 місяців тому +2

    can you make a video about theming not dark mode but like they make on shadcn they can change to multiple thems

  • @shinchima
    @shinchima 8 місяців тому

    good video thanks for uploading.
    How do you use the isDirty field with shadcn?
    You wouldn't want to save for example if no input forms have changed?

  • @a.s8840
    @a.s8840 9 місяців тому

    how can we make reusable formfields for textfield or email input using shadcn ui

  • @Albadrawi-k9l
    @Albadrawi-k9l 7 місяців тому

    Thank you for creating such a valuable video! I'm curious about connecting to MongoDB data-could you provide more insights on that?

  • @josepholatilo927
    @josepholatilo927 2 місяці тому +1

    good tutorial. but the link to the github repo is not working.

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  Місяць тому

      Thanks for the sub Joseph! I will check it out to see why its not working!

  • @diwanshuji947
    @diwanshuji947 9 місяців тому +1

    Amazing

  • @ts3798
    @ts3798 9 місяців тому

    How would you deal with file uploads?

  • @justingreen6561
    @justingreen6561 5 місяців тому +1

    so, TS keeps giving me the nasty error of type initiation is excessively deep and possibly infinite. ive been playing around for an hour and literally the basic boilerplate username form example , there it is. doesn't seem like anyone else has suffered this error for this instance but any ideas or suggestions are welcomed. I'm wondering if my TS version is out of wack or?
    aside from that, good vid. seems like a good workflow to form-ing, if only to settle this arggh. lol

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  5 місяців тому

      Thanks for watching and if you can send me a picture of your dependencies in your package.json I might be able to help you out. It does seem like something is a different version that is causing your error.

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu 7 місяців тому

    thank you

  • @sjoerdvermeijden
    @sjoerdvermeijden 5 місяців тому +1

    6:05. lol "all that shhh", "stuff"

    • @brettwestwooddeveloper
      @brettwestwooddeveloper  5 місяців тому

      😂 yea I try not to cuss on camera, but it almost slips out sometimes.

  • @AshikSarkar-yu7jy
    @AshikSarkar-yu7jy 2 місяці тому +1

    It would take you 15 minutes to build this form with default html elements with react-hook-form. You just made this unneccessarily long and complicated lol