Solid Forms Guide Recommendations
Unanswered
VoidPointer posted this in #help-forum
I'm looking for a solid, working guide to taking forms a little further, e.g. server side validation using the much touted
I looked at the shadcn
Using library components appeals to me because they magic away boilerplate, but they also introduce complexity that I might not need. This is why I would appreciate a really solid, reliable guide to either using library components, or to getting the most out of simpler components, like Nextjs own components, or maybe combining the two.
useActionState and maybe say hadcn components. I have a very basic form working using just plain html form with shadcn Input, Button and Label for the nice styling. Maybe that's all I need?I looked at the shadcn
Form, but it's discontinued, with attention to useActionState coming later Then I found a guide that uses Nextjs Form with the same hook, but using const [formState, formAction, pending] = React.useActionState, that shows formState possibly undefined. I can probably fix this quite easily, but this kind of thing makes me uneasy, because to adapt the sample to my form requirements is a lot of work given the verbosity of the examples, and as always, the basis of the examples glaringly overlook anything more complex than mere string fields.Using library components appeals to me because they magic away boilerplate, but they also introduce complexity that I might not need. This is why I would appreciate a really solid, reliable guide to either using library components, or to getting the most out of simpler components, like Nextjs own components, or maybe combining the two.
5 Replies
Cinnamon Teal
Are you asking how to handle validation and form state? If so you don't really need a
I usually use React Hook Form as it handles the client side state for the form inputs and also works really nicely with Zod. So I can reuse the same Zod schema on both the client and the server.
But RHF doesn't work well with
If you are using Shadcn they do have a guide on working with RHF: https://ui.shadcn.com/docs/forms/react-hook-form
I have been checking conform recently and it works nicely with
And honestly if your forms are not that complex, you can simply just rely on the browser native validation on the client and then do the actual validation on the server before hitting the database. That way you may not need any extra library and the server validation results can be easily returned and consumed using the
Form component. Just the normal <form> works.I usually use React Hook Form as it handles the client side state for the form inputs and also works really nicely with Zod. So I can reuse the same Zod schema on both the client and the server.
But RHF doesn't work well with
useActionState. You would need to manually call the server action inside the handleSubmit handler of RHF and handle any response it returns. So useActionState would be useless in that case.If you are using Shadcn they do have a guide on working with RHF: https://ui.shadcn.com/docs/forms/react-hook-form
with attention to useActionState coming laterThey haven't made the
useActionState guide public yet, maybe it's still a WIP, but you can check it's current state here: https://ui.shadcn.com/docs/forms/nextI have been checking conform recently and it works nicely with
useActionState but their API is still not stable yet, so don't think it will be ideal for any production work: https://conform.guide/And honestly if your forms are not that complex, you can simply just rely on the browser native validation on the client and then do the actual validation on the server before hitting the database. That way you may not need any extra library and the server validation results can be easily returned and consumed using the
useActionState hook.I think I'll try go with just
useActionState and no libs, but even that is tripping me up, with type mismatch errors between the action and the form. How would you suggest handling server validation errors with "manual" validation in the action?I fell off the bus trying to follow this guide, https://ui.shadcn.com/docs/forms/next, even just for
useActionState and zod validation, without using the components.@VoidPointer I think I'll try go with just `useActionState` and no libs, but even that is tripping me up, with type mismatch errors between the action and the form. How would you suggest handling server validation errors with "manual" validation in the action?
Cinnamon Teal
Hard to know what could be the issue without seeing the code.
I always use Zod to validate the data. So if the zod validation fails you can return the errors in any shape you like.
First try to get it work in the simplest form. Even that Shadcn example is bit too big. Just put a form and a input down. Create a server action that returns something and pass it the
If needed check the docs for the hook as well: https://react.dev/reference/react/useActionState
This is also a much more simpler but clear guide if you need: https://nextjs.org/docs/app/guides/forms
I always use Zod to validate the data. So if the zod validation fails you can return the errors in any shape you like.
First try to get it work in the simplest form. Even that Shadcn example is bit too big. Just put a form and a input down. Create a server action that returns something and pass it the
useActionState. Don't even add something like Zod at first. Once you get the basic setup working slowly add the things you need.If needed check the docs for the hook as well: https://react.dev/reference/react/useActionState
This is also a much more simpler but clear guide if you need: https://nextjs.org/docs/app/guides/forms
I got it sorted, thanks, incidentally by doing close what you say here. I had a previous form that used a non generic useActionState, and had looked to hard at it and missed getting a proper
FormState type, which turned out must look like this:export type EditCategoryFormState = {
values?: z.infer<typeof editCategorySchema>;
errors:
| {
id?: string[];
name?: string[];
desc?: string[];
}
| undefined;
success: boolean;
};