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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
How to change the styleName for the textfield based on the condition
Hi everyone,
I have a textfields called password and email. And I used the validators as follows
final PasswordField password = new PasswordField("PASSWORD");
password.setStyleName("errorResolverSearch");
password.addValidator(new PasswordValidator());
password.setRequired(true);
final TextField email = new TextField ("E-MAIL");
email.setStyleName("errorResolverSearch");
email.setInputPrompt("e-mail");
email.setRequired(true);
email.addValidator(new EmailValidator(
"Invalid Email address {0}"));
email.setInvalidAllowed(false);
And I want to change the outline of the textfield boxes based on the condition in this way:
if(!email.isValid())
{
email.removeStyleName("errorResolverSearch");
email.addStyleName("errorUserManagement");
email.setValue(" ");
System.out.println("The email is not valid");
}
if(!password.isValid())
{
password.removeStyleName("errorResolverSearch");
password.addStyleName("errorUserManagement");
password.setValue(" ");
System.out.println("The password is not valid!!!");
}
The css for the textfields are:
.v-textfield-errorUserManagement
{
outline: 1px solid rgb(256, 0, 0);
border-radius:0px !important;
box-shadow: -1px -1px 5px #c0c0c0;
width: 160px;
}
.v-textfield-errorResolverSearch {
border-radius:0px !important;
box-shadow: -1px -1px 5px #c0c0c0;
width: 160px;
}
And when I run the program, only the email textfiled has the red colored line. I want both text fileds to have red border when the invalid value is inputed
Hi,
is there a reason you're not targeting the CSS error class v-textfield-error that's been generated by the framework? That way you wouldn't need to add and remove class names in your own code and just leave stylings to the style sheet.
-Olli