Formik/yup 验证不会触发错误消息

问题描述

我需要验证用户年龄，必须是 18 岁或以上。在 console.log 中，如果用户小于 18 岁，它会返回 false，为什么它不会触发错误消息？我哪里做错了

dob: Yup.date()
      .required('required')
      .test('You must be 18 or older',(birthdate) => {
        const cutoff = new Date();
        cutoff.setFullYear(cutoff.getFullYear() - 18);
        console.log('birthdate <= cutoff',birthdate <= cutoff); 
        return birthdate <= cutoff;
      }),

  <Formik
    initialValues={formValues || initialValues}
    validationSchema={validationSchema}
    enableReinitialize
    onSubmit={onSubmit}
    onChange={onSubmit}
    validateOnMount
  >
    {(formik) => {
      return (
        <Form>
          <div className={classes.formBlock}>
            <div className={classes.formWrapper}>
              {Object.keys(initialValues.mainData).map((item,idx) => {
                if (item === 'dob') {
                  return (
                    <div className={classes.formControl} key={idx}>
                      <label className={classes.labelStyle} htmlFor={item}>
                        {translates[item]}
                      </label>
                      <Field
                        name={`mainData.${item}`}
                        className="MuiInputBase-input"
                      >
                        {({ form,field }) => {
                          const { setFieldValue } = form;
                          const { value } = field;
                          return (
                            <Flatpickr
                              id={item}
                              className={classes.calendarWrapper}
                              options={{
                                dateFormat: 'd.m.Y',locale: Russian,allowInput: true,}}
                              onChange={(val) => {
                                console.log('val',{ val,value });
                                setFieldValue(
                                  `mainData.${item}`,val
                                );
                              }}
                              value={value}
                            />
                          );
                        }}
                      </Field>

                      <ErrorMessage name={`mainData.${item}`}>
                        {(error) => (
                          <div className={classes.inoutError}>{error}</div>
                        )}
                      </ErrorMessage>
                    </div>
                  );
                }
              })}
            </div>
          </div>

        </Form>
      );
    }}
  </Formik>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）