How to change the styleName for the textfield based on the condition

General
1

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

2

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