I have a main form and also have a second form block to check registered or not in one payment service. When I click on the button Check, triggering the main form and sends data. The second form also sends data. I want to just check when I click on the button inside the second form. How to handle this, can you help?

const { register, handleSubmit, errors, control } = useForm({
      mode: {
      onblur,
    },
      });

const {
    register: register2, handleSubmit: handleSubmit2, errors: errors2, control: control2,
  } = useForm({
    mode: {
      onblur,
    }
  });

  const onSubmit = (data) => {
      console.log(data);
  };
  const onSubmit2 = (data) => {
      console.log(data);
  };

<form onSubmit={handleSubmit(onSubmit)}>
  <Controller
    as={InputMask}
    control={control}
    mask=" \9\98 99 999 99 99"
    name="phone"
    id="phone"
    defaultValue={phone}
    required
  />

  <form
    onSubmit={
    handleSubmit2(onSubmit2)
    }
  >
    <Controller
     as={InputMask}
     control={control2}
     mask=" \9\98 99 999 99 99"
     name="phone_alif"
     id="phone_alif"
     required
    />
   <button>Check</button>
  </form>
  
  <button>Send</button>
</form>

CodePudding user response：

I solved. In order to not triggering the main form use onClick event listener on the Check button.

<form>
    <Controller
     as={InputMask}
     control={control2}
     mask=" \9\98 99 999 99 99"
     name="phone_alif"
     id="phone_alif"
     required
    />
   <button onClick={handleSubmit2(onSubmit2)}>
    Check
   </button>
  </form>