# How to only show validation errors if a field is touched or modified?

**URL:** <https://jsonforms.discourse.group/t/how-to-only-show-validation-errors-if-a-field-is-touched-or-modified/475>\
**Category:** General\
**Created:** [November 5, 2021, 2:39pm UTC](https://jsonforms.discourse.group/t/how-to-only-show-validation-errors-if-a-field-is-touched-or-modified/475 "2021-11-05T14:39:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![BryceLohr](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/brycelohr/32/192_2.png) [@BryceLohr](https://jsonforms.discourse.group/u/BryceLohr)\
**Post date:** [November 5, 2021, 2:39pm UTC](https://jsonforms.discourse.group/t/how-to-only-show-validation-errors-if-a-field-is-touched-or-modified/475/1 "2021-11-05T14:39:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [November 5, 2021, 4:30pm UTC](https://jsonforms.discourse.group/t/how-to-only-show-validation-errors-if-a-field-is-touched-or-modified/475/2 "2021-11-05T16:30:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BryceLohr](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/brycelohr/32/192_2.png) [@BryceLohr](https://jsonforms.discourse.group/u/BryceLohr)\
**Post date:** [September 6, 2022, 4:55pm UTC](https://jsonforms.discourse.group/t/how-to-only-show-validation-errors-if-a-field-is-touched-or-modified/475/3 "2022-09-06T16:55:12Z")

</div>

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.