Form Validation in Next.js (Server Validation & Client Validation)

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ธ.ค. 2024

ความคิดเห็น • 27

  • @remongrabu
    @remongrabu หลายเดือนก่อน

    I kept hearing good things about Conform for some time but this video will definitely make me switch. Thanks for the well structured video!

  • @lyricon4043
    @lyricon4043 หลายเดือนก่อน

    Thanks a ton.. This is a best way to validate a form I have ever seen.. Simple and secure.. Keep doing the good work.

  • @louizejang
    @louizejang 4 หลายเดือนก่อน +3

    The GitHub repository you provided does not contain the complete code for page.tsx and action.ts as discussed in the video. Could you please upload the full code?

  • @sopitaquick4580
    @sopitaquick4580 หลายเดือนก่อน

    greate tutorial men, I was having some problems integrating conform on the client side, but mostly the problems where the cached values.

  • @McFlurriez
    @McFlurriez หลายเดือนก่อน

    how does conform work with both the onSubmit and action fields? is there some javascript magic under the hood? that doesn't work with other frameworks by default

  • @dimuthushasantha7104
    @dimuthushasantha7104 5 หลายเดือนก่อน

    Great video. If we want to ensure that emails are unique, how can we do this?

    • @janmarshalcoding
      @janmarshalcoding  5 หลายเดือนก่อน

      I would use an external service for that, since it's not easy to build such a security layer yourself. A service I recently saw which looks cool: arcjet.com/ (Note I am NOT affiliated with them, its just a service which looks cool I guess)

  • @mozhdeow
    @mozhdeow หลายเดือนก่อน

    Thanks you ❤
    Just please tell me what is the name of the theme you are using in vscode?

  • @yves4107
    @yves4107 9 วันที่ผ่านมา

    its hard find atual content for nextjs 15 and react 19, thanks

  • @Jim49267
    @Jim49267 4 หลายเดือนก่อน

    Jan have you ever tried to add kinde to your projects? I think it is useful and easy, if you can can you explain it, I can understand more from you than other professionals

  • @skverskk
    @skverskk 5 หลายเดือนก่อน

    Awesome. Do you plan on releasing repo on the zod and conform source code?

    • @janmarshalcoding
      @janmarshalcoding  5 หลายเดือนก่อน

      Sure forgot about it 🤣. Will add it later today, due to having a lot of things to do right now... Check the TH-cam description in about 6 hours or so

    • @skverskk
      @skverskk 5 หลายเดือนก่อน

      @@janmarshalcoding 😀

  • @zhenobiikuzo4957
    @zhenobiikuzo4957 4 หลายเดือนก่อน

    that looks cool how bout resetting? I'm intrigued to try it

  • @AliCanGunduzDev
    @AliCanGunduzDev 4 หลายเดือนก่อน

    Hello, thank you for your video, it helped me, but I have a question, how should I keep the state for long form operations? I am not sure if there is a variable I can listen to here.

    • @AliCanGunduzDev
      @AliCanGunduzDev 4 หลายเดือนก่อน

      What I mean is that after the form is submitted, actions.ts takes about 3-4 seconds. Because of this, the user does not feel as if the form has been submitted. Is there any way to do it without waiting for the submission response to the user?

  • @skyhappy
    @skyhappy 5 หลายเดือนก่อน

    hows it differ from react hook form?

    • @janmarshalcoding
      @janmarshalcoding  5 หลายเดือนก่อน

      react-hook-form is a client side form validation library. But server actions are publicly available. That means if a malicious user attacks your website, he still could make a post request without doing any validation. To circumstance this you would have to do manual validation on the server side, but in my opinion this DX is not great and that's why I like conform since it makes life 10x easier...

  • @falasefemi3344
    @falasefemi3344 5 หลายเดือนก่อน

    🎉🎉

  • @ahmadullahnikzad2850
    @ahmadullahnikzad2850 4 หลายเดือนก่อน

    this does not work in my project. I get this error TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_4__.useActionState) is not a function or its return value is not iterable

    • @janmarshalcoding
      @janmarshalcoding  4 หลายเดือนก่อน

      Is your from marked as use client? is your actions file marked as use server? do you have anything other imported?

    • @erickgallardo1730
      @erickgallardo1730 3 หลายเดือนก่อน

      This error appears due to nextjs version. If you have version "14.2.13" or lower like me, support for useActionState is not yet available. This can be fixed (at least temporarily) by using the useFormState hook. It can also be solved by updating to a "beta" version of Nextjs (I have not tested this last option).

  • @motivatedmomin
    @motivatedmomin 5 หลายเดือนก่อน

    I want to learn skills you have
    How much time require❓❓

  • @KaluKarKK
    @KaluKarKK 5 หลายเดือนก่อน +1

    Great video but it would be better if you use react hook form. ✌️

    • @janmarshalcoding
      @janmarshalcoding  5 หลายเดือนก่อน +1

      react-hook-form is a client side form validation library. But server actions are publicly available. That means if a malicious user attacks your website, he still could make a post request without doing any validation. To circumstance this you would have to do manual validation on the server side, but in my opinion this DX is not great and that's why I like conform since it makes life 10x easier...

    • @PERQ1S
      @PERQ1S 4 หลายเดือนก่อน +1

      Using react hook form with server actions and zod on the client & server is doable but annoying, this is the way to do it. Really good video