Formik 如何在表单提交时显示错误

Question

正在尝试在表单提交时验证字段。（同时，onblur 和 onchange 也必须处于活动状态）但是当我将字段留空并提交表格时。它没有给出任何错误。

这怎么可能？

我的第二个问题是；当我 post 重视我的休息 api。它可能 return 400 错误，我想将这些错误用于我的验证字段。这是我的 api 回复：

{ "msg": "缺少必填字段", “错误”：{ “姓名”： [ “validation.required” ], “国家”： [ “validation.required” ], “城市”： [ “validation.required” ] } }

必须让名称字段、城市和国家字段验证错误。这怎么可能？

    <Formik
        initialValues={values}     
        enableReinitialize={true}
        validationSchema={ProductEditSchema}
        validateOnChange={true}
        validateOnBlur={true}
        onSubmit={(values) => {     
          saveLocation(values);
        }}
        >
......
            <Button
              size="large"
              className={classes.button}
              variant="contained"
              color="secondary"      
              onSubmit={() => handleSubmit()}        
            >
              {intl.formatMessage({ id: "GENERAL.SUBMIT" })}
            </Button>
          </Form>
          </>
        )}
      </Formik>

Answer 1

嗯，Formik 不会自动为您处理验证，您需要自己来做。您可以编写自己的验证，这很烦人，或者您可以使用 Yup 并创建一个验证模式，您可以将其传递到 Formik 表单中（它们支持 Yup 验证模式）。

您基本上是像这样为您的数据创建一个验证模式：

let schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required().positive().integer(),
  email: yup.string().email(),
  website: yup.string().url(),
  createdOn: yup.date().default(function () {
    return new Date();
  }),
});

然后您可以将架构作为 prop 传递给您的 Formik 组件：

<Formik
  validationSchema={schema}
  onSubmit={(values) => {
    //Check here if your data is valid
  }}
/>

这里是 Github page for Yup.

这里是 Formik's documentation 的部分，解释了如何集成 Yup 和验证（参见 validationSchema）。

Formik 如何在表单提交时显示错误

Formik How to Show Errors When Form Submit

reactjs

formik