Show validation errors for non-attached components

Hi,

On a form with many tabs, we do validation of the complete object when the user presses submit. However, it seems that for tabs that were not attached at the moment of submit/validation (the user had no need to navigate to these), the validation errors are not shown on the fields. Only when the tab was visited at least once before submit we get the validation errors.

Suspecting this is because the tab and its field was not attached to the UI, and hence the logic that attaches error messages to component is not run. Is there a way to fix this ?

Thanks

Hi.

Do you have a code example?

What do you mean by the validation errors are not shown on the field?

Where did you expect the validation errors to show? On an invisible / never-shown field? (Sorry for this sarcastic tone)

@Jean-Christophe.1 With validation errors i mean the red message that is shown below a field in a formlayout. A code example is hard to provide, large application etc.

@knoobie When the user, after having clicked submit and seeing that there are validation errors, enters one of said tabs, the validation errors inside that tab should be shown. But that’s not the case, only when the tab was visited before (hence me thinking it has to do with being ‘attached’) prior to clicking the submit button they are shown.

Ahh… I think I understand your problem now… you need to call validate again once the user enters a tab / changed a tab so that the validation is run once the fields are attached / visible. Make sure to add if/else for “first visit of tab” so that the fields are not marked invalid when entering the first time

Hello!
Maybe you are looking for something similar? https://cookbook.vaadin.com/form-tabs

A code example would help to see if it’s a bug in Vaadin ( like the form layout) or a misuse in your application.
The cookbook is a good example of how it should work. ( I guess that the behavior you’re expecting).

Thanks for the hints. I was expecting this to work out of the box, but seems that you have to revalidate. So, i override onAttach() and apply some logic there to re-attach validation errors to the specific form fields.

The situation is a bit more complex than the form tabs in the cookbook link, we’re already using some of the ideas there to show that a tab has errors. Sadly, not all our validation is done via the Binder and jsr annotations. We have deeper domain level validation logic that is triggered after the ‘simple’ binder validation passes. The complexity was then to attribute such domain level validation error to one or more ui components. Hence, validation errors being triggered on form components that are not in sight.