Hey all,
I’ve been preparing for my Vaadin project for it’s v23 upgrade release currently (upgrade from v14).
Just noticed this morning in a side to side comparison that the configured error messages on invalid fields are not showing up on screen.
Previously, under v14, the error message would show up underneath a field with the configured error text.
Now, under v23, the validators are correctly evaluating the state of the field as invalid.
The error-message text I can see in the front end page structure (as seen when using browser dev-tools to examine the field on screen.
<div slot="error-message" id="error-message-vaadin-text-field-338" role="alert">Please fill in invoice number</div>
But the field does not actually display it anywhere visible.
I’ve tried searching the vaadin component library documentation for v23, and it’s just not covered.
Any tips here? Something simple I must be missing. Why are these error messages not displaying visibly against the fields in error?
here is the old V14 field (left) next to the v23 field (right)
Maybe you can share how you’re using the binder. For example if you’re using Binder#setValidationStatusHandler the message on the field does not appear anymore.
Thanks for the response.
The binder usage was added when those became a thing in Vaadin.
(this application was started under Vaadin 6, upgraded to 7, and then 14 along the way, and now V23 on the way to v24).
I have not used binder.setValidationStatusHandler.
I create the binder, and tie it to the field, and create validators.
(when I’m at work tomorrow again I can show the usage).
It is buried deep in some generative code that builds up my UI from a screen confguration file, so not strictly straightforward.
In the previous v14, you didn’t need a validation status handler. The component just natively displayed their allocated error status messages without additional configuration.
I did see finally there was some discussion in the DataBinding documentation around allocating a Label to use as the validation feedback. I did try it before the end of work, but it still did not function.
It was a simplistic allocation of a new Label, but what I tried.
From what you said, if I’m not allocating a validation status handler, would you expect it to show up?
The validators I allocate are varied (regex / min - max length checks / mandatory validator / etc. ) but I haven’t used a new validation status handler before.
Yes the message should be visible. It might be a css issue or something else. It might be in the binder, or in the application code. It’s a bit difficult to have a good answer without more code.
Thanks for your input.
As I was going through and creating the post with code snippets, I found the cause.
Your confirmation that it SHOULD be visible by default was immensely helpful.
When moving the css styling from the old v7/v14 format to the new declared custom styles to be imported at the Class level, I found the problem.
A sneaky rogue
[part="error-message"] {
display: none;
}
had made it’s way into common import, instead of being conditional based on configuration.
Again appreciate the input. Wouldn’t have been found so quickly without the feedback.
1 Like
