Next.js Discord

Discord Forum

react-hook-form handleSubmit callbacks not getting invoked

Answered
Cimarrón Uruguayo posted this in #help-forum
Open in Discord
Cimarrón UruguayoOP
'use client'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import RadioInput from '@/components/ContactUs/RadioInput'
import { Form } from '@/components/ui/form'
import TextInput from '@/components/ContactUs/TextInput'
import { Button } from '@/components/Button'
import { RadioGroup } from '@/components/ui/radio-group'
import { contactSchema, ContactFormData } from '@/zod-schemas'
export default function ContactForm() {
  const form = useForm<ContactFormData>({
    defaultValues: { email: '', name: '', phone: '', budget: '', message: '', subject: '', expertise: '' },
    resolver: zodResolver(contactSchema)
  })
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)}>
        <h2>Work inquiries</h2>
        <div>
          <TextInput control={control} name="name" label="Name" />
          <TextInput control={control} name="email" label="Email" />
          <TextInput control={control} name="company" label="Company" />
          <TextInput control={control} name="phone" label="Phone" />
          <TextInput control={control} name="subject" label="Subject" />
          <TextInput control={control} name="expertise" label="Expertise" />
          <TextInput control={control} name="message" label="Message" />
          <div>
            <fieldset>
              <legend>Budget</legend>
              <RadioGroup>
                <RadioInput label="$5K – $10K" value="5" />
                <RadioInput label="$10K – $25K" value="10" />
                <RadioInput label="$25K – $50K" value="25" />
                <RadioInput label="$50K – $100K" value="50" />
                <RadioInput label="$100K – $150K" value="100" />
                <RadioInput label="More than $150K" value="150" />
              </RadioGroup>
            </fieldset>
          </div>
        </div>
        <Button type="submit">
          Let’s work together
        </Button>
      </form>
    </Form>
  )
}
Answered by American Crow
First of all in the code you shared you are not logging anything. You just did
<form onSubmit={form.handleSubmit(console.log)}>

I'd recommend doing something like
  const onSubmit = async (data) => {
    conosle.log("form is being submitted ...")
  }
  ...
  return(
    <form
      onSubmit={form.handleSubmit(onSubmit)}
    >
    ...
)
View full answer

10 Replies

Cimarrón UruguayoOP
When I click the submit button, the console.log inside handleSubmit doesn't get called
howevver, when i change the form's onSubmit method to be (e) => console.log(e); e.preventDefault();, I can see that the form does get submitted
so there must be an issue with the way i've used react-hook-form here
But I'm using shadcn, so I believe that should already be integrated into the form component when i installed it?
Cimarrón UruguayoOP
bump
American Crow
First of all in the code you shared you are not logging anything. You just did
<form onSubmit={form.handleSubmit(console.log)}>

I'd recommend doing something like
  const onSubmit = async (data) => {
    conosle.log("form is being submitted ...")
  }
  ...
  return(
    <form
      onSubmit={form.handleSubmit(onSubmit)}
    >
    ...
)
Answer
btw passing in console log as a function will still work
(data) => console.log(data) is the same as console.log
Thanks for reply