为什么此日期验证不适用于Formik?

时间:2019-05-12 19:00:42

标签: javascript reactjs validation formik yup

我正在使用Formik / Yup验证表单,并且正在尝试验证生日。

这是我的表格:

let initialState = [
  // { dateOfBirth: "2019-05-07" },
  // { dateOfBirth: "2019-05-07" }
];
return (
  <div>
    <Formik
      initialValues={initialState}
      validationSchema={Schema}
      onSubmit={this.handleSubmit}
      render={({ handleSubmit, isSubmitting }) => (
        <Form onSubmit={handleSubmit}>
          {childrenToOrder.map((item, index) => {
            let borderBottom = `1px solid black`;
            // no border on the last item
            if (childrenToOrder.length - 1 === index) {
              borderBottom = "none";
            }
            return (
              <div
                key={index}
                style={{
                  marginBottom: `${scale.s4}rem`,
                  paddingBottom: `${scale.s4}rem`,
                  borderBottom: borderBottom
                }}
              >
                <h2
                  style={{
                    fontSize: "24px",
                    marginBottom: `${scale.s3 + scale.s1}rem`
                  }}
                >
                  {item.firstName}
                </h2>
                <Field
                  type="date"
                  label="Date of birth"
                  name={`${index}.dateOfBirth`}
                  placeholder="27/01/2000"
                  component={Input}
                />
              </div>
            );
          })}
          <button type="submit" disabled={isSubmitting}>
            Submit Form
          </button>
        </Form>

这是我的Scehma

const Schema = Yup.object().shape([
  {
    dateOfBirth: Yup.date().required("Required")
  }
]);

当我console.log记录表单的值时,我得到以下信息:

[{dateOfBirth: "2019-05-07"}, {dateOfBirth: "2019-05-07"}]

那不行吗?

我想要实现的是验证出生日期,因此必须在输入中输入日期。稍后,我将要确保它不是将来的日期-但甚至无法使验证生效!

有什么想法吗?

Link to Sandbox

0 个答案:

没有答案