Error indicator in Vaadin 10 ?

Flow
1

How to implement Error indicator in Vaadin 10 ?

2

What’s the situation where you want to show an error indicator?

3

Entry Form. User fills the fields and presses button save.
Application validates and shows error indicators on fields.
There was such a functionality in Vaadin 8.

4

Sure, just wanted to check what was needed.

You should look into modifying the theme for vaadin-text-field, and placing a custom error indicator using CSS.

Something like this:

<dom-module id="error-indicators" theme-for="vaadin-text-field">
  <template>
    <style>
		:host([invalid]
) [part~="label"]
::after {
			content: "!";
			display: inline-block;
			width: 1em;
			height: 1em;
			border-radius: 50%;
			text-align: center;
			line-height: 1;
			color: var(--lumo-error-text-color);
			border: 2px solid;
		}
    </style>
  </template>
</dom-module>

That should work for text fields/areas, date pickers, combo boxes and selects (dropdown menus). You would need to add something similar for radio and checkbox groups.

5

There’s also the [part~="error-message"] element where you could add an error indicator icon.

6

Thank you for your help.

Nothing personal, just my thoughts. I and other developers have choosen Vaadin, since we don’t want to dive into JS/HTML/DOM/CSS stuff. There are React, Angular, Vue and front-end developers to do it.
Vaadin 8 provided error indicator Java API out of the box.
Vaadin 10 doesn’t :(.
Are there any plans provide Java API like in Vaadin 8 ?

7

Yeah, I (and the company in general) know that v10+ is still lacking many of the convenient features from the previous versions, but we are working on closing the gap.

I haven’t heard any specific plans regarding error indicators. This is the first request I hear to have it back. Which isn’t to say those wouldn’t be needed.

We basically did the same for all the previous “common component features”, including caption, description/tooltip and error indicator, that those are the responsibility of each component separately, not something all components must support. For example, it doesn’t make for a good user experience to place an error indicator on a button, or have a tooltip for an entire data grid.

If I assume correctly, you would like to have the error indicators for text fields (or other text input like fields like combo box and date picker). In my view, the feature is basically that the field is marked as invalid, which currently works. What remains is how that invalid state should be shown visually. Currently in the Lumo theme, it is shown with a red background color for the input field, and a red error message if you provide one. The Material theme is similar (red underline instead of a background color).

Would you be satisfied, if there was a theme variant (f.e. textField.addThemeVariant("error-icon")) for text fields which you could opt-in, which would show the invalid state with an icon somewhere close to the field?

8

Thank you for your detailed explanation. Do I understand correctly, that I will be able via Java API to set icon and text of error message on appropriate input fields ?

9

Do I understand correctly, that I will be able via Java API to set icon and text of error message on appropriate input fields ?

You can already set the error message.

Setting an error icon, I’m betting “no”, there won’t be an API for setting that. It still seems like a decision the theme should make, not something you should worry about when you implement a specific UI. The usage of icons to indicate field validation errors should be consistent across an app, so it would be error-prone (no pun-intended) to make it possible to decide case-by case if one is shown or not.

And to implement/change a theme you can’t really avoid writing CSS.

10

Super ! Thank you very much.