Submit and handle two forms with one handleSubmit in react-hook-form

[n-ii-ma]

In my react app, I have two address forms on one page that have two save address functions which save the address in the database. There's also one submit button that submits both two fields and navigates to the next page (The plus button in the circle adds the address to the saved addresses list):

What I want to do is to validate the form fields and I'm already doing that by calling two instances of the useForm() hook:

// useForm hook
   const {
     control: senderControl,
     handleSubmit: handleSenderSubmit,
     setValue: senderSetValue,
   } = useForm({
     defaultValues: {
       senderName: '',
       senderLastName: '',
       senderPostalCode: '',
       senderPhone: '',
       senderAddress: '',
     },
   });
 
   // useForm hook
   const {
     control: receiverControl,
     handleSubmit: handleReceiverSubmit,
     setValue: receiverSetValue,
   } = useForm({
     defaultValues: {
       receiverName: '',
       receiverLastName: '',
       receiverPhone: '',
       receiverPostalCode: '',
       receiverAddress: '',
     },
   });

I've then added the handleSubmit method of these two hooks to the onClick (onPress in RN) of the plus button for each field respectively.

This does indeed validate the forms individually but the problem arises when I'm trying to submit the whole page with the SUBMIT button.

I still want to be able to validate both of these two address fields when pressing the general SUBMIT button but I have no idea how I can validate these two instances with one handleSubmit and get the return data of both fields' values.

Is there even any way this can be possible at all?

[Moshyfawn]

Why do you use 2 instances of useForm If the form is supposed to be submitted with both form sections?

[n-ii-ma]

I'm trying to validate them upon pressing the save address button as well.

Just two fields of each section would be enough: postalCode and address.

[n-ii-ma]

Thanks to @TalgatSaribayev 's comment on Stack Overflow for leading me to this solution.

I didn't need to set any specific validation rules for the address field and in the end I separated the sender and receiver forms into two different pages.

First, I've got to point out that instead of getting the input values of postalCode and address fields with the getValues API, I used the useWatch hook to get the most updated values.

// Watch inputs
const watchedInputs = useWatch({
  control,
  name: ['senderPostalCode', 'senderAddress'],
});

When I saved the input values with getValues in a variable, I got the previous state instead of the most recent one and the only way to solve that was calling getValues('INPUT_NAME') whenever I wanted to get the most recent one. Even then I needed to call an instance of useWatch without saving it in any variable to keep track of the changes since typing in the input fields wouldn't update the getValues at all. So in the end I resolved to use useWatch and store its values in a variable and use that to access the values of the input fields.

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

As @TalgatSaribayev pointed out, creating just one useForm instance was sufficient enough. All I had to do was to create a function which would set the errors manually and check their validation upon pressing the save address button.

// Check if sender postal code input has error
const senderHasError = () => {
  if (!/^\d+$/.test(watchedInputs[0])) {
    setError('senderPostalCode', {
      type: 'pattern',
      message: 'Postal Code must be a number',
    });
    return true;
  }
    
  // Any other rules
  if (YOUR_OWN_RULE) {
    setError('senderPostalCode', {
      type: 'custom',
      message: 'CUSTOM_MESSAGE',
    });
    return true;
  }
    
  // Clear error and return false
  clearErrors('senderPostalCode');
  return false;
};

The problem was that the errors wouldn't get updated (cleared) even when they had passed the validation. As if the invalid input wouldn't attach onChange event listeners to re-validate it. Something that happens as default when you submit the form with the onSubmit mode of useForm. (https://react-hook-form.com/api/useform)

So I resolved to use the trigger API of useForm to manually trigger form validation and listen for the changes on the postalCode field when the save address button is pressed.

First I created a toggle state which changes the trigger state:

// Postal code onSubmit event state
const [triggered, setTriggered] = useState(false);

Then used the trigger API of useForm in a useMemo to trigger the input validation only if the triggered state is set to true and the input field's value has changed:

// Manually trigger input validation if postal code's onSubmit event is true
useMemo(() => {
  if (triggered) trigger('senderPostalCode');
}, [watchedInputs[0]]);

I assume the way I triggered the input field with the trigger API works the same way as useForm's mode of onSubmit does it under the hood: Starting the trigger when the user presses the save address button by changing the trigger state with setTrigger.

// Add address to sender favorites
const handleAddSenderFavAddress = () => {
  // Trigger on the press event
  setTriggered(true);

  // Return if sender postal code input has error
  if (senderHasError()) return;

  // SAVE ADDRESS LOGIC
  ///////////////////////////////
};

This was the only way I managed to validate separate input fields apart from the general validation that occurs with useForm's handleSubmit function.

I welcome any more answers that might lead to a better solution.

[aashishGitHub]

I had same problem, where I had to show multiple independent forms on the same page to be opened based on some conditions, some as sub-forms. The problem was seen when we submit one form, another form in dom used to get submitted.
I solved it by using display none to non displayed forms, kept it inside a portal.

<div
  className={clsx('fixed w-full top-0 right-0 transition-all duration-300', {
    'right-[-100%] ': isForm1Closed,
  })}
>
  <div ref={refFormOne} className={isForm1Closed? 'hidden' : 'block'} />
  <Portal container={refFormOne.current}>
    <FormOne />
  </Portal>
</div>

<div
  className={clsx('fixed w-full top-0 right-0 transition-all duration-300', {
    'right-[-100%] ': isForm2Closed,
  })}
>
  <div ref={refFormTwo} className={isForm2Closed? 'hidden' : 'block'} />
  <Portal container={refFormTwo.current}>
    <FormTwo />
  </Portal>
</div>;