#useRef hook returning null after being assigned to form.

2 messages · Page 1 of 1 (latest)

brisk frost
#

hello, I have been following this tutorial from Jack Herrington https://www.youtube.com/watch?v=VLk45JBe8L8&t=825s on using server actions with forms. and I am running into this issue where when referencing my form using the useRef hook and assigning it to the onSubmit prop of the form with: form.handleSubmit(() => formRef.current?.submit()) my form does not submit as the formRef.current value is returning a null value. removing the onSubmit prop from the form enables me to call the server action but I am not able to bring back any client side validation.

export default function signup(){
const signupFormRef = useRef<HTMLFormElement>(null);
const [state, formAction] = useFormState(actionSignupOnSubmit, {
message: ''
})

const form = useForm<z.infer<typeof signupFormSchema>>({
  resolver: zodResolver(signupFormSchema),
  defaultValues: {
  firstName: '',
  lastName: '',
  email: '',
  password: '',
  passwordConfirm: '',
  accountType: ''
},
})

return ... <form ref={signupFormRef} action={formAction} onSubmit={form.handleSubmit(() => signupFormRef.current!.submit(), )}> .... </form> ...

Let's figure out how to get form actions and React Hook Form to work together to get the best from both; client AND server side validation when JavaScript is enabled on the client, and user friendly server side validation when it's not enabled.

🎉 Free Forms Tutorial Series: https://www.pronextjs.dev/tutorials/forms-management-with-next-js-app-r...

▶ Play video
bold boltBOT
#

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)