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

Поделиться
HTML-код
  • Опубликовано: 9 янв 2025

Комментарии • 27

  • @remongrabu
    @remongrabu 2 месяца назад

    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 2 месяца назад

    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 2 месяца назад

    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

  • @mozhdeow
    @mozhdeow Месяц назад

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

  • @Jim49267
    @Jim49267 5 месяцев назад

    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

  • @yves4107
    @yves4107 21 день назад

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

  • @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?

  • @zhenobiikuzo4957
    @zhenobiikuzo4957 4 месяца назад

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

  • @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)

  • @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 RUclips description in about 6 hours or so

    • @skverskk
      @skverskk 5 месяцев назад

      @@janmarshalcoding 😀

  • @ahmadullahnikzad2850
    @ahmadullahnikzad2850 5 месяцев назад

    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  5 месяцев назад

      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❓❓

  • @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 месяцев назад

    🎉🎉

  • @KaluKarKK
    @KaluKarKK 5 месяцев назад +2

    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 5 месяцев назад +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