CODEWITHSUNDEEP
reactjsformikyup
LXT
LXT

Reputation: 845

Validation 2 fields with yup and formik

This is my default value:

const defaultValues = {
    busi_day: [],
    busi_start_time: '09:00',
    busi_end_time: '17:00',
  };

This is my 2 fields:

<FastField type="time" className="start-time" name="busi_start_time" value={values.busi_start_time} />
<FastField type="time" className="start-time" name="busi_end_time" value={values.busi_end_time} />

This is my validatio using Yup:

const validationSchema = Yup.object().shape({
    busi_start_time: Yup.string()
      .required(),
    busi_end_time: Yup.string()
      .required(),
  });

Now, I want to validate that the busi_end_time must be after the busi_start_time. For example: {busi_start_time: '09:00' busi_end_time: '17:00'} is valid but {busi_start_time: '14:00' busi_end_time: '08:00'} is not valid. How I can do that?

Upvotes: 2

Views: 1895

Answers (1)

Nemanja
Nemanja

Reputation: 3669

Use moment.js library and code below:

  Yup.object().shape({
  busi_start_time: Yup.string().required("Start time cannot be empty"),
  busi_end_time: Yup.string()
    .required("end time cannot be empty")
    .test("is-greater", "End time should be greater", function (value) {
      const { busi_start_time} = this.parent;
      return moment(value, "HH:mm").isSameOrAfter(moment(busi_start_time, "HH:mm"));
    })
});

Upvotes: 3

Related Questions