如何在 ReactJs 中有条件地更改 Yup 验证

Question

Hi all I have following code: my code

I have two custom inputs components first one is common input second one checkbox:

      const MyTextInput = ({ label, ...props }) => {
        const [field, meta] = useField(props);
        return (
          <>
            <label htmlFor={props.id || props.name}>
              {label} <span>*</span>
            </label>
            <div>
              <input {...field} {...props} />
            </div>
            {meta.touched && meta.error ? <div>{meta.error}</div> : null}
          </>
        );
      };



    const MyCheckbox = ({ children, ...props }) => {
        const [field, meta] = useField({ ...props, type: "checkbox" });
        return (
          <div>
            <label>
              <input type="checkbox" {...field} {...props} />
              <span> {children}</span>
            </label>
            {meta.touched && meta.error ? (
              <div>{meta.error}</div>
            ) : null}
          </div>
        );
      };

I am using that components to create inputs for my form:

          <MyTextInput
            label="validity"
            name="validity"
            type="date"
            disabled={a}
          />

          <MyCheckbox name="withoutLimitations" onClick={checkMe}>
            without Limitation
          </MyCheckbox>


          <MyTextInput
            label="number Of Uses "
            name="numberOfUses"
            type="text"
            disabled={b}
          />
          <MyCheckbox name="withoutLimitations_1" onClick={checkMe1}>
            without Limitation
          </MyCheckbox>

Also I am using Yup for creating validation:

       validationSchema={Yup.object({
          validity: Yup.date().required(),
          numberOfUses: Yup.number().required()
        })}

Now my question is how can I change my validation schema when I am checking one of checkboxes.

For example if I am checking first checkbox that mean that date form should become disabled and value should become null no meter what user choose before checking the checkbox.

with useState I able conditionally enable or disable the inputs but can't change validation schema, because when input don't have any data then I am pressing on submit button there was nothing happen.

Please help me to resolve this problem

Answer 1

I would solve it like this:

  const validationSchema = Yup.object({
    validity: a ? Yup.date() : Yup.date().required(),
    numberOfUses: b ? Yup.number() : Yup.number().required()
  })

and put it to Formik :

validationSchema={validationSchema}

or you can also improve it, reduce the component's rerender by using the useMemo :

  const validationSchema2 = React.useMemo(
    () =>
      Yup.object({
        validity: a ? Yup.date() : Yup.date().required(),
        numberOfUses: b ? Yup.number() : Yup.number().required(),
      }),
    [a, b],
  )

Answer 2

After researching I found the answer. Here is example for only first input and checkbox

    withoutLimitations: Yup.boolean(),

    validity: Yup.date().when("withoutLimitations", {
            is: false,
            then: Yup.date().required(),
    }),

Also I changed my date input because safari don't support <input type="date" /> . Now it looked like this:

     const [check, setCheck] = useState(false);

      <MuiPickersUtilsProvider
                      utils={DateFnsUtils}
                      locale={ruLocale}
                    >
                      <KeyboardDatePicker
                        format="MM/dd/yyyy"
                        value={check ? null : beforeDate}
                        onChange={(value) => {
                          formProps.setFieldValue("validity", value);
                          setBeforeDate(value);
                        }}
                        autoOk={true}
                      />