微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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;
      }),

enter image description here

  <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 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?