React hook form handlesubmit doesn't work

Question

Hey guys ı have some issues react hook form handle submit function doesn't work what is issue can you help ?

const AccountTabs = ({ userDetail }) => {
  const { register, handleSubmit } = useForm();
  console.log(userDetail)

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
    console.log(data)
  }
  return (
    <Fragment>
      <Card>
        <CardHeader className='border-bottom'>
          <CardTitle tag='h4'>İşletme Ayarları</CardTitle>
        </CardHeader>
        <CardBody className='py-2 my-25'>
          <div className='d-flex'>
            <div className='me-25'>
              <img className='rounded me-50' alt='İşletmeye ait logo ' height='100' width='100' />
            </div>
            <div className='d-flex align-items-end mt-75 ms-1'>
              <div>
                <Button tag={Label} className='mb-75 me-75' size='sm' color='primary'>
                  Yükle
                  <Input type='file' hidden accept='image/*' />
                </Button>
                <Button className='mb-75' color='secondary' size='sm' outline >
                  Sil
                </Button>
                <p className='mb-0'> JPG veya PNG türünde yükleme yapınız</p>
              </div>
            </div>
          </div>
          <Form className='mt-2 pt-50' onSubmit={(e) => { e.preventDefault(); handleSubmit(onSubmit) }} >
            <Row>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' > Ad Soyadı  </Label>
                <Input defaultValue={userDetail.name} {...register("name", { required: true })} />
              </Col>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' > Kullanıcı adı  </Label>
                <Input defaultValue={userDetail.username}  {...register("kullanici", { required: true })} />
              </Col>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' > E-mail </Label>
                <Input type='email' defaultValue={userDetail.contact.email} {...register("email", { required: true })} />
              </Col>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' >  İşletme Adı  </Label>
                <Input defaultValue={userDetail.companyName} {...register("companyName", { required: true })} />
              </Col>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' > Telefon Numarası </Label>
                <Cleave
                  value={userDetail.contact.phone}
                  {...register("phone", { required: true })}
                  className='form-control'
                  options={{ phone: true, phoneRegionCode: 'TR' }}
                />
              </Col>
              <Col sm='6' className='mb-1'>
                <Label className='form-label' > Adres</Label>
                <Input defaultValue={userDetail.contact.address} {...register("address", { required: true })} />
              </Col>

              <Col className='mt-2' sm='12'>
                <input type='submit' className='me-1' value='Kaydet' />

              </Col>
            </Row>
          </Form>
        </CardBody>
      </Card>
    </Fragment>
  )
}

export default AccountTabs

form can submit but onSubmit function doesn't work what is problem i am ussed first time react-hook-form library, form can submit but onSubmit function doesn't work what is problem i am ussed first time react-hook-form library,form can submit but onSubmit function doesn't work what is problem i am ussed first time react-hook-form library

Answer 1

handleSubmit fires submit function only when validation is successful, So please see if all the required data is filled when you submit the form ( or handle the validations).

const AccountTabs = ({ userDetail }) => {
  const { register, handleSubmit, formState } = useForm();
  console.log(userDetail)

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
    console.log(data)
  }

  // formstate has the errors
  console.log(formState.errors);



  return (
    <Fragment>
       //code
    </Fragment>
  )
}

Check this link for validtions