I understand that JSONForms does not currently track the “touched” or “dirty” state of individual form fields. We’d like to avoid presenting validation errors to the user before they have made any changes to a a field. What would be the best (i.e., easiest to understand and most seamlessly integrates with JSONForms) approach to implement this functionality in a library of custom renderers?
Hi @BryceLohr,
this depends a bit on how you want the developer experience to be and the features you require.
In case you want to hide this from your renderer code your customized bindings could just pass along a modified errors and handleChange prop to your renderers. The errors will be handed over always empty until your custom handleChange gets its first change reported. From then on you can pass the regular errors.
This would free the renderer code from the complexities of handling this themselves, however you are not as flexible, e.g. you can’t react on a user just clicking into a renderer.
A different approach would be to handle this completely within your renderers. For example each renderer tracks a touched state. Until it’s true you just don’t show your errors. This can also be encapsulated, for example with a custom hook. This allows for full flexibility in each renderer, but you can no longer flip a global switch, for example to consider a form fully touched from the beginning.
Of course this can again be introduced with an additional prop from your bindings.
You can also go a middleground and integrate the touched semantics into your bindings, e.g. to hand down a touched and indicateTouched() props to your renderers and let them just hook them up.
I think these are the major options. Other options like filtering errors via AJV seem overly complicated.
Wow, I really forgot to follow up on this! This post was almost a year ago… We ended up basically using Stefan’s second approach of handling the touched state inside the control renderers. But we delegated the actual state management to a React provider that we wrap JSONForms with, and use a custom hook in the controls to work with that state. It works like a champ, and is pretty simple.