why does handleSubmit in react hook useform is not being called

Question

I am using useform hook but the handlesubmit function is not being called. here is the code:

This is the useform hook i am using

  const {
register,
handleSubmit,
formState: { errors },
watch,
reset,  } = useForm<SellingInvoiceClientDetails>({
resolver: yupResolver(SellingInvoiceScheme),
defaultValues: {
  rib: "",
  cardNumber: "",
  cardType: CardType.IDENTITY_CARD,},});

The function i want to call in the hundleSubmit is the following

    const addSellingInvoiceClientDetails = (
sellingInvoiceDetails: SellingInvoiceClientDetails
) => {
console.log(sellingInvoiceDetails.cardType);
props.setSelectedClient();
props.updateSellingInvoiceInfo(
  sellingInvoiceDetails.cardType,
  sellingInvoiceDetails.cardNumber,
  sellingInvoiceDetails.rib
);
handleClose();  };

The code of the Form:

 return (
<>
  <Modal.Header closeButton>
    <Modal.Title>
      <FormattedMessage id={"client.info"} />
    </Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <Form onSubmit={handleSubmit(addSellingInvoiceClientDetails)}>
      <Form.Group className="mb-3">
        <Form.Label>
          <FormattedMessage id={"card.number"} />
        </Form.Label>
        <Form.Control
          {...register("cardNumber")}
          placeholder={intl.formatMessage({ id: "card.number" })}
        />
        <Form.Text className=" text-danger">
          {errors.cardNumber?.message}
        </Form.Text>
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>
          <FormattedMessage id={"card.type"} />
        </Form.Label>
        <Form.Check
          {...register("cardType")}
          type={"radio"}
          label={intl.formatMessage({ id: CardType.IDENTITY_CARD })}
          value={CardType.IDENTITY_CARD}
          id={"identity_card"}
        />
        <Form.Check
          {...register("cardType")}
          type={"radio"}
          label={intl.formatMessage({ id: CardType.DRIVING_LICENCE })}
          value={CardType.DRIVING_LICENCE}
          id={"driving_licence"}
        />
        <Form.Text className=" text-danger">
          {errors.cardType?.message}
        </Form.Text>
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>RIP</Form.Label>
        <input
          type="text"
          className="form-control"
          {...register("rib")}
          placeholder="XXXXXXXXXXXXX"
        />
        <Form.Text className=" text-danger">
          {errors.rib?.message}
        </Form.Text>
      </Form.Group>
    </Form>
  </Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={handleClose}>
      <FormattedMessage id={"cancel"} />
    </Button>

    <Button
      type="submit"
      variant="primary"
      onClick={handleSubmit(addSellingInvoiceClientDetails)}
    >
      <FormattedMessage id={"ok"} />
    </Button>
  </Modal.Footer>
</>

);

the function addSellingInvoiceClientDetails is not being excuted and when i click the Ok button nothing happens altough the handleClose function called in cancel button is working just fine.

Answer 1

You have put the Button element out of the form.

Try to move it inside the <form> tag