TextField show error withou bind

Flow
1

There are a way to show a error message and paint the field in RED without make a bind?

I have one Combobox to select, and a button to click. so If my user click the button without select anything in combo, I wanna to show that error message in combobox,(No need to create a bean just to bind a field)

tks

2

To make it red it quite simple:

ComboBox<String> cb = new ComboBox<>("Select a fruit", Arrays.asList("Apple", "Orange", "Grape"));
Button button = new Button("Check button");
button.addClickListener(clickEvent -> {
	if (cb.getValue() == null) {
		cb.getElement().setAttribute("invalid", "");
	} else {
		cb.getElement().removeAttribute("invalid");
	}
});

The harder part is to show the error message in its original place cause it’s somewhere in the shadow DOM of the vaadin-combo-box:

<vaadin-combo-box> / #shadow-root / <vaadin-text-field> / #shadow-root / <div class="vaadin-text-field-container"> / <div part="error-message">

Maybe it’s enough to start from the vaadin-text-field and get the label part.
But I don’t know how to get shadow DOM parts from Java API.

The cb.getElement().getShadowRoot() -> throw new NoSuchElementException("No value present")

Maybe some CSS selector on the vaadin-text-field:

:host(.warning) [part="error-message"]
 {
/* maybe some content */
}

or some voodoo magic JS can do the trick, I dunno.

If it’s appropriate to you to show the error message in another label (maybe you can composite the label and combobox in a FlexLayout or in a CustomField) then that is easier. Just put the combobox and the label in the flexLayout (flexDirection:column) and show the label (set visible or just set the text/value) when the combobox is empty.

3

ComboBox and many other components implement HasValidation. As such, they have setInvalid(...) and setErrorMessage(..). No need for any workarounds. Or am I missing something here?

4

Patrick Schmidt:
ComboBox and many other components implement HasValidation. As such, they have setInvalid(...) and setErrorMessage(..). No need for any workarounds. Or am I missing something here?

That’s correct.