Validation only occurs when focus leaves field?

[tomqwpl]

If I look at the the demo examples on the jsonforms website (https://jsonforms.io/examples/basic), on the "basic" form for example, the validation occurs as I type. So for example if I start typing a name, I get an error about it being too short, but then when the name exceeds 3 characters, the error goes away. On the examples at https://jsonforms-vuetify-renderers.netlify.app/, the validation only appears to occur when focus leaves the field. So you can end up with an example such as the following:

Is this a deliberate choice?

Thanks.

[sdirix]

Hi @tomqwpl,

yes, at the moment we bind against the change event of Vuetify which is only triggered once a change is "done". Therefore there is no internal data update or validation until the event occurs.

I'm open to changing this. I can think of two different options right now:

• Bind against input and handle the "local" value in a different field, then debounce changes to JSON Forms. Also requires syncing the "local" value should an updated data come our way but we must be careful to avoid rerenderings loops caused by intermediate changes. This is how it's done in the React Material renderers.
• Bind against input but update the global data in place which is possible in Vue (but isn't in React). For this we should add a new action which can trigger validation without requiring a data change. The validation request should be debounced.

[tomqwpl]

@sdirix Thanks for your response. For me, the currently behaviour is a deal breaker. The picture says it all really, the validation message isn't correct, and I think woudl be confusing to users. Normally using vue validate or something similar it validates on each key stroke, so I guess bound to the change event. Is the validation sufficiently slow it requires debouncing? I do that when validation requires server side look up, but never when it's just a set of regex based validation rules for example.

[yaffol]

It would be interesting to allow binding to either the change event or input - there are some situations where UX dictates that it should be one or the other.

In terms of validation performance, it may depend on how large your schema is. At the moment I don't think it's possible to validate a 'subset' of your schema with AJV, so even if you are only showing a few fields in a form, if the backing schema is very large, then the validation process could be heavy, even if they are just regex patterns.

There is also the question of whether or how the validation triggers re-rendering of the form or parts of it - if it causes a re-render then that could have a significant impact on performance.

[sdirix]

We're thinking about changing the default behavior and fixing the potential performance problems later, see https://github.com/eclipsesource/jsonforms-vuetify-renderers/pull/26. Note that you can always switch back and forth between these approaches by using custom renderers for the text based inputs.

[sdirix]

I'll close this now as #26 was merged. Also the inputs are debounced to avoid any performance impact (#28).