Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Show validation messages below field

Murat Öngüdü
1 decade ago Mar 20, 2012 9:50am
Marko Grönroos
1 decade ago Mar 20, 2012 10:41am

That is somewhat hard to do with the basic Vaadin forms. You could override the attachField() method to create an extra row below each field in the layout, and then have an invisible Label in that row. When the field value changes to one with error, just copy the error message to the Label. You might also want to get rid of the tooltip element somehow, for example with CSS, or simply by clearing the error message after copying it.

A more interactive solution would be to use the CSValidation Add-on. You can make the error message wrap to the next line with the following CSS:

.v-validatedtextfield-errormessage {
    display: block;
Last updated on Mar, 20th 2012
Murat Öngüdü
1 decade ago Mar 20, 2012 1:50pm