React-Final-Form Validating Ranges while toggling Required

Question

I'd like to truly validate on blur and conditional show range fields as required if a value is entered in either. If both values are removed, the errors should clear.

https://codesandbox.io/s/range-validation-via-values-subscription-o99zm

Hack: I can emulate validate on blur by caching the last meta data values and checking is visited is true but then I would have to reset the field state on both fields on clearing of both otherwise visited will be true and subsequent data entry and error will display prematurely. I believe this would get me all the way there but this feels counter intuitive and due to the FormSpy subscription on values.

Is there another way to use the API to accomplish this? Should I cache the values on the "range" outside of final-form in order to avoid subscribing to values? Am I confusing things? Thanks.

The reason I'd like to validate on blur is that I do not want to announce an error or visually flag a field as requiring attention before the user has had the opportunity to interact with the field. (This is annoying, bad UX and hard on users with cognitive issue) — blu

Erik R. Erik R. · Accepted Answer · 2020-06-20T05:40:57

I think the key piece you're missing is that the field-level validate() function is passed allValues. :-)

Your other option, of course, is to use record-level validation.

React-Final-Form Validating Ranges while toggling Required

1 Answers