T3 Stack Form Validation
In general, I think I can safely say that good form validation requires both:
- the client UI to tell the user when form fields are valid
- the server checks all of the fields and validates them before accepting a request
I know Theo loves tRPC for server side validation and to provide a type-safe query he can call on the client side. But what does he (/ what do people) do for rendering form errors on the client side? Are there good libraries out there that also work well with zod?
9 Replies
react-hook-form
this looks interesting....
ok then from a structural PoV my only follow up is question is: Ive seen Theo put the zod schema inline in the tRPC router
should i have a separate place for declaring the schemas so I can use them in both places?
Yes
ok. so I should have like /src/schemas? or something
do whatever you want!
whatever feels right to you
well i did that before and i ended up with kind of a frankestein monster with my current capp
for me i would just put it in utils
trying to rewrite it without completely screwing everything up
ok. that makes sense too
alright. tyvm
you can use the same schema in the trpc procedure input and the form
i agree that react-hook-form is the best choice currently, some people also seem to like mantine form a lot
but yea just define your schema, then use them in the router and the FE form validation