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

Question

一旦表单的字段被验证，提交不会触发重新运行验证。有没有办法在提交表单时触发重新运行验证？

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

我创建了这个沙箱来演示我的意思。

谢谢！

更新：一些附加信息：

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

Answer 1

图书馆作者在这里。我总是对人们可以使我的假设无效的新方法着迷。我的意思是以一种真诚积极的方式，因为它会导致学习。

Final Form 假设您的验证函数是“纯的”或“幂等的”，即在给定相同的值时将始终返回相同的结果。这就是为什么在允许提交之前它不会再次运行同步验证（只是为了仔细检查）：因为它已经存储了上次运行它的结果。通过使用外部计时器，您已经使该假设无效。

如果您有更好/更简单/“更官方”的解决方案，我仍然很乐意看到它！

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

更正式的方法是this.validate在onSubmit. 唯一棘手的部分是错误将作为 返回meta.submitError，因此您需要在显示错误时检查两者。像这样：