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...