Form Validation in Next.js (Server Validation & Client Validation)
Вставка
- Опубліковано 28 вер 2024
- What's Up everyone.
Form Validation (Server Validation & Client Validation) is one of the most important concepts in Next.js and in general Web development. Today, you will lean how to validate a form in Next.js using Zod and Conform.
Zod: zod.dev/
Conform: conform.guide/
GitHub Repo: github.com/ski...
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?
I want to learn skills you have
How much time require❓❓
Couple of years 😂🚀
🎉🎉
Great video but it would be better if you use react hook form. ✌️
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...
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
that looks cool how bout resetting? I'm intrigued to try it
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.
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?
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
Great video. If we want to ensure that emails are unique, how can we do this?
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)
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
Is your from marked as use client? is your actions file marked as use server? do you have anything other imported?
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).
hows it differ from react hook form?
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...
Awesome. Do you plan on releasing repo on the zod and conform source code?
Sure forgot about it 🤣. Will add it later today, due to having a lot of things to do right now... Check the UA-cam description in about 6 hours or so
@@janmarshalcoding 😀