Vaadin input field / validation styling

I am working on the validation aspects of a project and run into some troubles getting the validation field styled as I would like.

Let me base my example on the standard TextField, with following code:


		textField = new TextField();
		textField.setNullRepresentation("");
		textField.addValidator(new RegexpValidator("", "Input should be at least 5 characters long."));
		textField.setImmediate(true);
		textField.setRequired(true);

This renders as the screenshot included below. On the screenshots I marked 3 positions:

  1. The rendered UI
  2. The styling of the input field
  3. The required field indicator

I have a few issues with the rendered output. First of all the red required asterisk. I can style the indicator so that it is not visible by setting .v-required-field-indicator to hidden, but what if I would like a + instead of a *?

The same applies for the exclamation mark icon and it’s popup. Setting this hidden via CSS seems to me a lot more trouble than indicating in code not to update the UI.

I tried to achieve my expected behavior by setting .setValidationVisible to false:


		textField = new TextField();
		textField.setNullRepresentation("");
		textField.addValidator(new RegexpValidator("", "Input should be at least 5 characters long."));
		textField.setImmediate(true);
		textField.setRequired(true);
		textField.setValidationVisible(false);

In that case I still need to hide the *, but worse is I cannot use the v-textfield-error style anymore to override in my CSS design. Adding a style myself is not possible (without workaround) as discussed in http://vaadin.com/forum/-/message_boards/message/233136

What would be the best way to style validation?
11470.png