React form validation with react-hook-form and multiple form components

Question

I have a form with multiple components and tried to follow steps in this tutorial, to have my inputs validated: 7 Form Components For React Hook Form I Always Use

I just tried with first one, which is name, but validation won't happen. Instead console shoots a message: form submission canceled because the form is not connected react

Here is my sandbox: Sandbox

The form component should manage the overall validations FormProvider, useFormon submit, while in my test component I tried to manage the single input validations and error messages. It is important however that Form.js submit button keeps the onClick={makeContract}

Cuong Vu · Accepted Answer · 2021-09-19 17:38:37Z

1

You need to remove your onClick handler in your <input type="submit">

In react-hook-form, you should have only one submit handler, which you already had here

<form onSubmit={handleSubmit(onSubmit)}

the onSubmit handler here will only be called if all the fields in your form are valid.

So if you want to call makeContract when submitting form, call it inside onSubmit

  // only called when all fields valid
  const onSubmit = (data) => {
    console.log(data);
    makeContract();
  };

Live example

answered Sep 19, 2021 at 17:38

Cuong Vu

3,72316 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React form validation with react-hook-form and multiple form components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related