onSubmit from react-hook-form not working when using yup on my react form

Viewed 223

I have written the following validations:


const schema = yup.object({
  // bookingLink: yup.string(),
  brand: yup.string().required(I18n.t("is_required")),
  listing_name: yup.string().required(I18n.t("is_required")),
  star_rating: yup.number().min(1).max(5).required(I18n.t("is_required")),
  booking_contact: yup.string().required(I18n.t("is_required")),
  bali_beds_num: yup.number(),
  bali_beds_capacity: yup.number().positive().required(I18n.t("is_required")),
  address: yup.string().required(I18n.t("is_required")),
  latitude: yup.number().required(I18n.t("is_required")),
  longitude: yup.number().required(I18n.t("is_required")),
  // open_date: yup.date(),
  // close_date: yup.date(),
  release: yup.number(),
  nearby_activities: yup.string().required(I18n.t("is_required")),
  margin: yup.number().positive().required(I18n.t("is_required")),
  widget_margin: yup.number().positive().required(I18n.t("is_required")),
  // connect: yup.string(),
})

Some of the inputs are commented because they are not requiered fields and I thought them to be a possible cause of the issue. When I press the submit button, nothing happnes, I do not get any error on dev tools and onSubmit is not triggered;


  const onSubmit = (data) => {
    console.log("onSubmit de hotel form?")
    setLoading(true);
  };

I never get to see the console log in there.

The inputs look like:

                    <Col md={6}>
                      <Label style={errors.listing_name && error}>
                        <strong>{I18n.t("rooms_form__hotel_name")}</strong>
                      </Label>
                      <input
                        id="listing_name"
                        name="listing_name"
                        defaultValue={hotel && hotel.listing_name}
                        type="text"
                        placeholder={I18n.t("rooms_form__hotel_name")}
                        {...register("listing_name")}
                        className="form-control"
                        style={errors.listing_name && error}
                      />
                      {errors.listing_name && (
                        <span style={errors.listing_name && error}>
                          This field is required
                        </span>
                      )}
                    </Col>

Using RHF dev tool I can see the count for submitted is increasing each time I click the button. I do not get any other feedback besides that.

enter image description here

What could be the problem?

0 Answers
Related