on conditional select input field branch is not a function

Question

I am working on a application based on false i have to display end date.

my schema:

export const experienceSchema = yup.object().shape({
    experience: yup.string().required(),
    job_title: yup.string().required(),
    category: yup.string().required(),
    current_working_status: yup.string().required(),
    join_date: yup.date().required(),
    end_date: yup
        .date()
        .notRequired()
        .when('current_working_status', {
            is: 'false',
            then: yup.date().required('Please enter date'),
        }),
});

my html:

<div className="mt-2">
    <label className="fw-medium">
        Currently Working<sup>*</sup>
    </label>
    <div className="input-group">
        <select
            className="form-select"
            id="select-example"
            name="current_working_status"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.current_working_status}>
            <option value="">Select an option</option>
            <option value={true}>Yes</option>
            <option value={false}>No</option>
        </select>
    </div>
    {formik.touched.current_working_status && formik.errors.current_working_status ? <div className="edit_error">{formik.errors.current_working_status}</div> : null}
</div>

<div className="d-md-flex justify-content-between my-3">
    <div className=" col-md-5">
        <label className="fw-medium">
            Joining Date<sup>*</sup>
        </label>
        <div className="input-group">
            <input
                type="date"
                id="join_date"
                name="join_date"
                className="form-control"
                placeholder="join_date"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.join_date}
            />
        </div>
        {formik.touched.join_date && formik.errors.join_date ? <div className="edit_error">{formik.errors.join_date}</div> : null}
    </div>

    {formik.values.current_working_status !== 'true' ? (
        <div className=" col-md-5">
            <label className="fw-medium">End Date</label>
            <div className="input-group">
                <input
                    type="date"
                    id="end_date"
                    name="end_date"
                    className="form-control"
                    placeholder="end_date"
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    value={formik.values.end_date}
                />
            </div>
            {formik.touched.end_date && formik.errors.end_date ? <div className="edit_error">{formik.errors.end_date}</div> : null}
        </div>
    ) : (
        ''
    )}
</div>

if user select currently working on yes, i just want to use join date, if select no i want use both join and end date. vice versa i want to validate.

When i select on no i am getting error as :

branch is not a function
TypeError: branch is not a function

Kindly please help me at this problem.

Using conditional validation i have inserted code still i am unable to work on it.

score 0 · Accepted Answer · answered Jul 17 '23 at 13:48

0

The then property expects a function:

//...
end_date: yup.date().when("current_working_status", {
  is: "false",
  then: () => yup.date().required("Please enter a valid date"),
  otherwise: () => yup.date().notRequired()
}),

answered Jul 17 '23 at 13:48

Ahmed Sbai

10,695
9
19
38

it seems work fine but even i select current_working_status is false, when i am checking in validation it was not giving error like please enter a valid date. – Sairam Gudiputi Jul 17 '23 at 13:59
@SairamGudiputi try `formik.values.current_working_status !== true` instead of `formik.values.current_working_status !== 'true'` see the difference [here](https://stackoverflow.com/a/8616501/13488990) – Ahmed Sbai Jul 18 '23 at 18:21

score -1 · Answer 2 · answered Jul 17 '23 at 13:38

-1

To fix this issue, you can modify your schema definition as follows:

export const experienceSchema = yup.object().shape({
  experience: yup.string().required(),
  job_title: yup.string().required(),
  category: yup.string().required(),
  current_working_status: yup.boolean().required(),
  join_date: yup.date().required("Please enter a valid date"),
  end_date: yup.date().when("current_working_status", {
    is: false,
    then: yup.date().required("Please enter a valid date"),
    otherwise: yup.date().notRequired()
  })
});

answered Jul 17 '23 at 13:38

Hoang Long

446
4
5

not working i have tryed this as well – Sairam Gudiputi Jul 17 '23 at 13:41
export const experienceSchema = yup.object().shape({ experience: yup.string().required(), job_title: yup.string().required(), category: yup.string().required(), current_working_status: yup.boolean().required(), join_date: yup.date().required("Please enter a valid date"), end_date: yup.date().when("current_working_status", { is: false, then: yup.date().required("Please enter a valid date"), otherwise: yup.date() }) }); – Hoang Long Jul 17 '23 at 13:43
When i adding this my initial validation broked N It was same issue as branch is not a function. – Sairam Gudiputi Jul 17 '23 at 13:46
yup.object().shape({ experience: yup.string().required(), job_title: yup.string().required(), category: yup.string().required(), current_working_status: yup.string().required(), join_date: yup.date().required(), end_date: yup.date().notRequired().when('current_working_status', { is: 'false', then: yup.date().required('Please enter date') }) }); – Hoang Long Jul 17 '23 at 13:50

on conditional select input field branch is not a function

2 Answers2