Question

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

这怎么可能？

第二个问题是；当我将值发布到我的休息API时。它可能会返回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();
  }),
});

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

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

这里是Github page for Yup。

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

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

1 个答案: