Form not submitting in Nextjs14

Answered

Sun bear posted this in #help-forum

Sun bearOP

2024-02-03T01:51:24.000Z

I made a form with tsx, zod, tailwindcss and react-hook-form. However, I am unable to submit the form. I'm not getting errors on the client or server consoles so I assume it's a zod validation error.

The form is huge so I'm providing the repo: https://github.com/aidanmcintosh07/spice-inn-form

Location: Location of the form in the folder: https://i.stack.imgur.com/9TfEl.png

I tried changing around the zod schema, displaying the form errors for the fields manually and fixing them within the form, removing the loading state on the onSubmit function.

Answered by aardani

so there you go, form is not submitting because of client-side error, therefore its a validation error :D

View full answer

27 Replies

@Sun bear I made a form with tsx, zod, tailwindcss and react-hook-form. However, I am unable to submit the form. I'm not getting errors on the client or server consoles so I assume it's a zod validation error. The form is huge so I'm providing the repo: https://github.com/aidanmcintosh07/spice-inn-form Location: Location of the form in the folder: https://i.stack.imgur.com/9TfEl.png I tried changing around the zod schema, displaying the form errors for the fields manually and fixing them within the form, removing the loading state on the onSubmit function.

aardani

2024-02-03T02:19:07.000Z

You should be able to checkk the error mesasge from the return of the useForm hooks from react-hook-form

then you can check what the client-side error message is

Sun bearOP

2024-02-03T02:22:53.000Z

how do i implement that? I haven't used

useForm

outside of how it's configured with zod.

aardani

2024-02-03T02:23:00.000Z

https://react-hook-form.com/get-started#Handleerrors

Sun bearOP

2024-02-03T02:23:10.000Z

thanks

aardani

2024-02-03T02:23:20.000Z

lmk if it works

Sun bearOP

2024-02-03T02:23:23.000Z

im trying to combine this line

const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm()

with my ```const form = useForm<z.infer<typeof formSchema>>({ ...// })

aardani

2024-02-03T02:27:27.000Z

you dont have to, just get the error

so from your code

its form.formState.errors

Sun bearOP

2024-02-03T02:27:43.000Z

ohhh ok

lemme try that

so from what i see, it should push an error (if there is one) to the form.formState.errors object whenever i interact with the inputs of my form right?

aardani

2024-02-03T02:32:20.000Z

No, if the zod validation failes, the error is already populated in the errors object

its part of the handleSubmit() method

Sun bearOP

2024-02-03T02:32:39.000Z

alright

aardani

2024-02-03T02:32:59.000Z

So in this case, you could see if its a client-side error, by printing the error of the form first

and if indeed its a client-side error, you can implement a User friendly UI to display the error, like Toast or Dialog or Error Messages

Sun bearOP