时间戳

首页 > 解决方案 > 仅当元素存在时如何运行验证？福米克+是的

javascript - 仅当元素存在时如何运行验证？福米克+是的

问题描述

我正在使用 Formik+Yup 创建表单和验证。我的表单是多页的，它有下一个按钮，应该禁用它，直到所有必填字段都正确填写（没有验证错误）。一切都非常简单（我只是使用 validateOnMount 和禁用按钮！formik.isValid），直到我来到带有单选按钮的页面，这应该弹出另一个问题（也带有单选按钮），具体取决于您对上一个问题的回答。

如果我使用 validateOnMount 所有验证都会运行（即使是不会弹出的问题），那么就不可能激活按钮。出于同样的原因，使用 validateOnBlur 或 OnChange 也不起作用。我只有通过编写看起来像这样的长而硬的“if”语句才能找到解决方案

disabled={
!formik.values.covidStatus ||
(formik.values.covidStatus === 'covidYes' && !formik.values.igTest) ||
(formik.values.covidStatus === 'covidYes' && formik.values.igTest === 'IgYes' &&
(!formik.values.testDate || !formik.values.igNumber)) || 
(formik.values.covidStatus === 'covidYes' && formik.values.igTest === 'IgNo' &&
 !formik.values.covidDate) 
}

我尝试为无线电问题编写自定义验证，问题是：是否可以确定自定义验证何时运行？准确地说，我希望该验证仅在字段存在时运行。

标签： javascriptreactjsformikyup

解决方案

推荐阅读