Theo's Typesafe Cult•16mo ago

Anyone can help me with this React-Hook-Form problem?

Hi, i'm creating a complex form-system using React-Hook-Form, but my handleSubmit's from RHF are not firing for some reason. I have stripped my code down to the bare minimum, and it's still not functioning, is there something I am missing?? The only thing firing off is the console.log("submitting..") but the actual data/errors of the form are not.

    const form = useForm<TFormValues>({
        resolver: zodResolver(FormSchema),
        defaultValues,
    });
return (
 <form
        onSubmit={(e) => {
            e.preventDefault();
            console.log("Submitting...");
            form.handleSubmit(
                (data) => {
                    console.log(data);
                },
                (errors) => {
                    console.log(errors);
                }
            );
        }}
    >
        <input type='text' {...form.register('testName')} />
        <input type='submit' />
    </form>

    const form = useForm<TFormValues>({
        resolver: zodResolver(FormSchema),
        defaultValues,
    });
return (
 <form
        onSubmit={(e) => {
            e.preventDefault();
            console.log("Submitting...");
            form.handleSubmit(
                (data) => {
                    console.log(data);
                },
                (errors) => {
                    console.log(errors);
                }
            );
        }}
    >
        <input type='text' {...form.register('testName')} />
        <input type='submit' />
    </form>

Calling form.handleSubmit() programatically will also not work, outside of the event handler itself, so I am unsure where this issue is arising from

1 Reply

wardxela•16mo ago

Hello, handleSubmit is a higher order function and should be called in the following way:

<form
  onSubmit={handleSubmit(onSubmit, onError)}
>
</form>

<form
  onSubmit={handleSubmit(onSubmit, onError)}
>
</form>

By the way, handleSubmit handles e.prevenDefault under the hood, so you don't need to worry about it yourself. Technically your code will start to work if you will call the function, that handleSubmit return:

    const form = useForm<TFormValues>({
        resolver: zodResolver(FormSchema),
        defaultValues,
    });
return (
 <form
        onSubmit={(e) => {
            e.preventDefault();
            console.log("Submitting...");
            form.handleSubmit(
                (data) => {
                    console.log(data);
                },
                (errors) => {
                    console.log(errors);
                }
            )(e) // NOTE CALL HERE
        }}
    >
        <input type='text' {...form.register('testName')} />
        <input type='submit' />
    </form>

    const form = useForm<TFormValues>({
        resolver: zodResolver(FormSchema),
        defaultValues,
    });
return (
 <form
        onSubmit={(e) => {
            e.preventDefault();
            console.log("Submitting...");
            form.handleSubmit(
                (data) => {
                    console.log(data);
                },
                (errors) => {
                    console.log(errors);
                }
            )(e) // NOTE CALL HERE
        }}
    >
        <input type='text' {...form.register('testName')} />
        <input type='submit' />
    </form>

Gaming

Programming

Anyone can help me with this React-Hook-Form problem?