javascript - 如何在 React Final Form 中重新运行验证
问题描述
验证表单的字段后,提交不会触发重新运行验证。有没有办法在提交表单时触发重新运行验证?
我有一个表单字段,如果未在特定时间范围内提交,其值可能会变为无效。它不是异步的;我只是试图涵盖用户暂时不点击提交的场景,当他们最终点击提交时,该值将变为无效。最终形式会记住在值更改后立即发生的验证结果,这意味着无论验证和提交之间经过多长时间,未更改的值仍然有效。这是我想要改变的行为;在我的用例中,干预时间很重要。我曾尝试使用包中的beforeSubmit
侦听器,final-form-submit-listener
但它只允许访问该FormApi
对象。我尝试使用pauseValidation
andresumeValidation
函数FormApi
但他们无法实现我想要的,或者我没有正确使用它们。我有一种感觉,如何做到这一点非常明显,但我无法弄清楚。
我创建了这个沙盒来说明我的意思。
谢谢!
更新:一些附加信息:
- 这是一个时间选择器。如果您要选择今天的时间,您可以选择 15 分钟后的时间。它现在有效,因为它现在在未来。如果您在接下来的 20 分钟内未触摸表单然后单击提交,则应阻止提交,因为您选择的时间现在是过去 5 分钟。
- 我考虑过直接在提交处理程序中添加验证。这里有两个答案。但是,这对我来说并不理想,因为最终表单不会收到错误并将它们传递给
meta
表单字段的对象。我的代码库很复杂,并且严重依赖meta
对象来显示错误消息。尝试在提交处理程序中复制该功能可能会起作用,但它很hacky并且违反了整个代码库中使用的约定。
解决方案
图书馆作者在这里。我总是对人们可以使我的假设无效的新方法着迷。我的意思是,以一种真诚积极的方式,因为它会导致学习。
Final Form 假设您的验证函数是“纯的”或“幂等的”,即当给定相同的值时将始终返回相同的结果。这就是为什么它在允许提交之前不会再次运行同步验证(只是为了仔细检查):因为它已经存储了上次运行它的结果。通过使用外部计时器,您已经使该假设无效。
如果您有更好/更简单/“更官方”的解决方案,我仍然很乐意看到它!
这个问题不需要修改器或装饰器。
更正式的方法是this.validate
在onSubmit
. 唯一棘手的部分是错误将返回为,因此您需要在显示错误时meta.submitError
检查两者。像这样:
推荐阅读
- mysql - 字符串集的灵活搜索查询?
- python-3.x - 评估返回 True 或 False 的多个函数的输出
- ios - 在 CGMutablePath 中添加多个排除路径
- azure - Azure - 如何修复“Web 应用程序只能通过 HTTPS 访问”警告?
- java - 如何在显示我的自定义 toast 时保持其他应用程序活动运行?
- wordpress - 古腾堡有智能感知/自动完成插件吗
- tensorflow - 在卷积和池化层之后将输入添加到卷积神经网络
- c# - 复杂类型不显示存储过程的结果
- flutter - 拖放芯片小部件
- swift - I want to only accept the A to Z in my textfield . And do not accept the numbers in swift 5