Show Validation Error Message ... For Chexbox

Hi all,

So, we have a case : a user might check a checkbox. But depending on its status, he might not be allowed to. One solution, of course, is to make the checkbox disabled for that member.

However, I got a bit curious / frustrated with one thing : what if the user was allowed to click on the checkbox, but would get the usual validation error message if he was not allowed to.

In other words: how to make a validation message appear on screen after checkbox click?

I have to admit, this is more for curiosity sake, as the use case is a bit random :smiley:

You can set up a Validator on the binder, instead of doing it on the binding of the checkbox. When you add a validator to a field binding, it can only validate the single input value of the bound field without context of the whole bean. This is different when you add a validator to the binder itself.

The following code snippet should visualize how this could be done. Please note that failing the validation will not put the error message in the error label of the checkbox. If you wanted this, you’d have to create your own [ValidationStatusHandler]
(https://vaadin.com/docs/v10/flow/binding-data/tutorial-flow-components-binder-beans.html) on the binder. By default the error message is shown as an error notification I think.

Binder<Shape> binder = new Binder<>();
Checkbox roundEdgesCheckbox = new Checkbox("Round Edges");
binder.forField(roundEdgesCheckbox).bind(Shape::hasRoundEdges, Shape::setRoundEdges); // no validator on the field-binding!
binder.withValidator((item, valueContext) -> {
	if (item.getShapeForm().equals(ShapeForm.SPHERE) && item.hasRoundEdges()) {
		return ValidationResult.error("Spheres do not have edges. Round edges can only be applied to Cubes and Pyramids");
	}
	return ValidationResult.ok();
});

You might want to use a single-item CheckboxGroup instead of a single Checkbox. CheckboxGroup implements the HasValidation interface (which contains the setErrorMessage method) unlike Checkbox.

In addition to the validator that Kaspar posted you also need to use a checkbox-field that is capable of showing the validation message.
Alternatively to the CheckboxGroup that Olli mentioned you could create a CustomField that contains a checkbox. CustomField implements HasValidation.
The CustomField implementation could look like this (just wrote down and tested superficially only).
Binding works as it does before. Just use this CheckboxWithError implementation instead of the Checkbox implementation.

public class CheckboxWithError extends CustomField<Boolean> implements HasStyle {

	private final Checkbox checkbox;

	public CheckboxWithError() {
		checkbox = new Checkbox();
		this.add(checkbox);
	}

	public CheckboxWithError(String labelText) {
		checkbox = new Checkbox(labelText);
	}

	@Override
	protected Boolean generateModelValue() {
		return checkbox.getValue();
	}

	@Override
	protected void setPresentationValue(Boolean newPresentationValue) {
		checkbox.setValue(newPresentationValue);
	}

	@Override
	public void addClassNames(String... classNames) {
		checkbox.addClassNames(classNames);
	}

	@Override
	public Style getStyle() {
		return checkbox.getStyle();
	}

	public void setLabel(String newLabelText) {
		// super.setLabel(newLabelText);
		checkbox.setLabel(newLabelText);
	}

	@Override
	public void setEnabled(boolean enabled) {
		checkbox.setEnabled(enabled);
	}

	@Override
	public boolean isEnabled() {
		return checkbox.isEnabled();
	}

}

Argh. Took me a couple of hours before I found out that vaadin check box(v14.3) do not support validation errors.

Why in the world is this not implemented? Also, I did not see anything on the documentation on this limitation, at least not here: https://vaadin.com/components/vaadin-checkbox/

It would be helpful if the documentation would explicitly state such limitations on components in addition to focusing on what the component does support.