Yup.mixed().test() 似乎破坏了 Formik 表单验证

Posted 2023-02-21

【中文标题】Yup.mixed().test() 似乎破坏了 Formik 表单验证

【英文标题】：Yup.mixed().test() seems to break Formik form validation

【发布时间】：2021-02-22 09:26:11

【问题描述】：

这可能看起来很长，但这只是因为我想确保提供我所拥有的所有信息。所以我在一个反应​​组件中有一个 Formik 表单，它处理几个文本输入和一些文件上传。我在 React 类组件中使用这个 Formik 组件：

<Formik 
  initialValues=
   ...initialValues, //no need to list them all here
   affiliateLogo: null,
   
  validationSchema=validationSchema
  onSubmit(values=>//do something with the values)
>
 (
   values,
   errors,
   touched, 
   setFieldValue,
   handleSubmit,
   handleChange,
   handleBlur
) => <form>...</form>
</Formik>

这是文件上传输入框：

<input
  type="file"
  id="affiliateLogo"
  name="affiliateLogo"
  onChange=event => setFieldValue('affiliateLogo', event.currentTarget.files[0])
  onBlur=handleBlur
/>

//validation error message added to every input field as below


  errors.affiliateLogo && touched.affiliateLogo
    ? <p className="errors">errors.affiliateLogo</p>
    : null

这是validationSchema的相关部分：

affiliateLogo: Yup.mixed()
  .test('fileType', 'Unsupported File Format', function (value) 
    const SUPPORTED_FORMATS = ['image/jpg', 'image/jpeg', 'image/png'];
    return SUPPORTED_FORMATS.includes(value.type)
  )
  .test('fileSize', "File Size is too large", value => 
    const sizeInBytes = 500000;//0.5MB
    return value.size <= sizeInBytes;
  )

由于某种原因，当 Yup.mixed().test() 添加到 validationSchema 时，表单验证会中断：直到我选择带有文件输入的文件后才会显示验证错误，然后才会突然出现错误消息（问题不在于验证本身，而是以错误消息的形式显示验证结果）。

假设我尝试提交一个未修改的表单 - 我希望出现所有错误消息（因为表单验证应该由 Formik 在提交时触发）但是当这个文件输入与 Yup.mixed 挂钩时没有任何反应().test() 验证器。然后我继续选择一个文件，该文件会显示所有错误消息（包括文件输入本身的正确错误消息）。

或者另一个例子：我访问了一个必需的文本字段，然后离开它而不在其中输入任何内容。如果我注释掉 Yup.mixed().test() 验证器，这工作得很好（错误消息出现在模糊中）。当验证器在那里时，什么都不会发生——验证错误消息不会出现，只有当我选择带有文件输入字段的文件时。

我一直在查看 Yup 和 Formik 文档，但找不到任何关于此的内容，也没有关于堆栈溢出的内容。

谁能指出我错过了什么？

提前谢谢你。

【参考方案1】：

您的验证器可能会抛出意外错误。 console.log(value) - 你可能会在某个时候发现它不是一个问题，并且尝试访问 size 和 type 属性会引发一个导致验证中断的错误。

【讨论】：

谢谢！就是这样。初始值设置为 null，我的印象是向验证链添加 nullable() 应该可以解决它，但除此之外，我还必须添加另一个检查，如下所示：Yup.mixed.test(value => if(value) //进行验证 )