While implementing more form items (we have a lot of large and more complex forms that we need to handle) we are running into the problem that while validation works, it will validate instantly on a required field. It will generate a default error message in the error text and thus trigger it to render as being a field with an error state.
Now from the user perspective, when they open the page, they will see a page where the required fields are already red.
This is not what we want, so to have a bit more control, i pass down the control.data from the renderer into the control-wrapper as well. Then in the control-wrapper i check for
this.required && !this.fieldData
to determine if a user has ‘tempered’ with that particular required field.
To support this on all the different form elements, it needs to be added to the different renderers, which in itself is not a problem, as we customized most of them anyways and the basic renderers are a limited set.
But the question is, would this be the best approach or is there a better one?
Switching the validationMode={currentValidationMode} seems to be an option, but then i suppose we need to handle it as well.
This is a valid solution, yes. JSON Forms lacks a way to customize all control (props) at once, therefore a customization affecting all renderers often need a “custom” renderer for all of them. In React this is often not much effort and just some boilerplate, as the logic is handled via HOCs. The way the Vue renderers are currently structured, they must be mostly copied which is unfortunate.
Note that most users don’t implement it like this but use a sort of “touch” marker. So once a user modified a field (or even only blurred it), the field is marked and then always shows its errors. If you have custom renderers anyway, then this should be easy to implement.
Back to your suggested solution: For this specific use case completing #1927 (make control wrapper customizable) would be the best. With this implementation we could also hand over more props to it, e.g. the data so that your customization could be easily implemented. If you, or someone else, would like to contribute this, then be my guest
The validationMode support is part of the core, so you don’t need to specifically handle it in your renderers. If validationMode is ValidateAndHide, then the errors will not be handed over to the respective renderers, therefore no errors will be shown at all to the user. This is typically used for a flow where all errors are only shown once the user clicks submit. Then you just need to prevent the submit when there are errors and switch the validationMode to ValidateAndShow.
What the mode does not support is only a partial display of errors, i.e. when a user touched or modified it.
Thank you for your answer! It is certainly something i want to contribute to! After we’ve done our implementation i’ll take a stab at trying to handle #1927.
