Client And Server Validation
I have a basic sign up form in TanStack Start with Zod and shadcn/ui that should be validated on the client and server. This is the workflow I want to accomplish:
1. On client submit, do client side validation for the whole form and if any field fails, do not submit the form to the server, and display the error(s) for the field(s).
2. On the server on a successful client submission, also validate the form. If the validation returns errors in the form, display them to the client.
3. If the client sees errors on a field after a client/server submission, the error should display until the user fixes it. This should apply to all fields.
This feels like the bare minimum for form UX, yet I can't seem to find a way to accomplish any of this. Currently for the workflow:
1. The form action prevents the form from being validated client side. If I add
2. The server does validate as expected, but none of the errors are shown. This is due to the
3. Despite errors not being shown initially, when changing the errored field, it (sometimes) displays its error state even after changing it to fit the validation requirement. The form thus cannot be submitted.
Are there any solutions to any of the problems?
1. On client submit, do client side validation for the whole form and if any field fails, do not submit the form to the server, and display the error(s) for the field(s).
2. On the server on a successful client submission, also validate the form. If the validation returns errors in the form, display them to the client.
3. If the client sees errors on a field after a client/server submission, the error should display until the user fixes it. This should apply to all fields.
This feels like the bare minimum for form UX, yet I can't seem to find a way to accomplish any of this. Currently for the workflow:
1. The form action prevents the form from being validated client side. If I add
onSubmit={() => form.handleSubmit()}2. The server does validate as expected, but none of the errors are shown. This is due to the
isTouchedconst isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;3. Despite errors not being shown initially, when changing the errored field, it (sometimes) displays its error state even after changing it to fit the validation requirement. The form thus cannot be submitted.
Are there any solutions to any of the problems?
