javascript - 如何在 React Final Form 中重新运行提交验证

标签 javascript reactjs react-final-form final-form

一旦验证了表单的字段,提交就不会触发重新运行验证。有没有办法在提交表单时触发重新运行验证?

我有一个表单字段,如果未在特定时间范围内提交,其值可能会变得无效。它不是异步的;我只是想介绍一个场景,其中用户有一段时间没有单击“提交”,当他们最终单击“提交”时,该值将变得无效。最终表单会记住值更改后立即发生的验证结果,这意味着无论验证和提交之间经过多长时间,未更改的值仍然有效。这就是我想要融入并改变的行为;在我的用例中,中间的时间很重要。我尝试使用 final-form-submit-listener 包中的 beforeSubmit 监听器,但它只提供对 FormApi 对象的访问。我尝试使用 FormApi 中的 pauseValidationresumeValidation 函数,但它们无法实现我想要的,或者也许我没有正确使用它们。我有一种感觉,如何做到这一点是非常明显的,但我无法弄清楚。 😩

我创建了this Sandbox来证明我的意思。

谢谢!

更新:一些附加信息:

  • 这是一个时间选择器。如果您选择今天的时间,则可以选择 15 分钟后的时间。它现在有效,因为它是当前的 future 。如果您在接下来的 20 分钟内没有触摸表单,然后单击“提交”,则应该会阻止提交,因为您选择的时间现在已经过去 5 分钟了。
  • 我考虑过直接在提交处理程序中添加验证。这里有两个答案可以做到这一点。但是,这对我来说并不理想,因为 Final Form 不会接收错误并将其传递给表单字段的 meta 对象。我的代码库很复杂,并且严重依赖 meta 对象来显示错误消息。尝试在提交处理程序中复制该功能可能会起作用,但它很糟糕,并且违反了整个代码库中使用的约定。

最佳答案

这里是库作者。我总是对人们覆盖我的假设的新方法着迷。我的意思是,以一种真诚积极的方式,因为它会带来学习。

🏁 最终形式假设您的验证函数是“纯粹的”或“幂等的”,即在给定相同的值时将始终返回相同的结果。这就是为什么它在允许提交之前不会再次运行同步验证(只是为了双重检查):因为它已经存储了上次运行的结果。通过使用外部计时器,您就使该假设无效。

If you have a better/simpler/"more official" solution, I'd still love to see it!

这个问题不需要修改器或装饰器。

更正式的方法是在 onSubmit 中运行检查(您甚至可以重用 this.validate)。唯一棘手的部分是错误将以 meta.submitError 的形式返回,因此在显示错误时需要检查两者。就像这样:

Edit Force revalidation on submit (React Final Form)

关于javascript - 如何在 React Final Form 中重新运行提交验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56988017/

相关文章:

javascript - 将数组从 GraphQL 查询传递到 React-Table

reactjs - 同构React,prerender.io相对于react-engine的优势?

javascript - 使用 Axios 和最终形式 promise 从捕获中返回

forms - 使用 yup 和自定义验证验证 react-final-form 表单

javascript - JavaScript 范围

javascript - 单击链接时停止页面向上滚动

javascript - REGEX 用于获取 URL 末尾不带/的 ID

javascript - 即使服务器正在发送数据,也无法显示来自 REST 调用的数据

javascript - 渲染函数(reactjs)出现错误?