How to change css class for the inputfield and label when validation fails?

Question

Suppose I have a username to validate, in this case I need to show username outputText and username inputText field in red color when validation fails along with error message.

I tried to bind all these in a panelgroup so that if validation fails all field should be affected. But simply putting panelgroup is not working.

My backing bean validator

public void emailValidate(FacesContext context,
        UIComponent componentToValidate,
        Object value)
        throws ValidatorException {


    String email = value.toString();


    if (!Validator.isEmailAddress(email))
    {
        FacesMessage message =
                new FacesMessage(FacesMessage.SEVERITY_ERROR,"Email","Please enter valid email address");
                throw new ValidatorException(message);
    }


}

My Jsf

<h:panelGroup>
<h:outputText value="Email"/>
<h:message for="emailInput/>
<h:inputText id="emailInput" value="#{mybean.email}" validator="#{mybean.emailValidate}"/>
</h:panelGroup>

Take a look at the example, it might help you http://stackoverflow.com/questions/1150776/css-style-change-with-jsf-validation — cubbuk, Jan 22 '13 at 07:32
@cubbuk Its going to change background color of inputbox not for other elements. — Kush Sahu, Jan 22 '13 at 07:51
Can you post your form inputs, and the backing bean? Basically you need to set a property indicating the validation is failed and use that property as a flag to change the css of the components that you want to update. — cubbuk, Jan 22 '13 at 08:33
@cubbuk you can see my code now. I want to change color of each element inside panelgroup. — Kush Sahu, Jan 22 '13 at 09:57

BalusC · Accepted Answer · 2014-06-06T08:06:08.190

10

Bind the input component to the view via binding attribute. It'll become available as an UIInput component reference in EL, so that you can use UIInput#isValid() in styleClass attribute.

<h:outputLabel for="emailInput" value="Email" 
    styleClass="#{emailInput.valid ? '' : 'error'}" />

<h:inputText id="emailInput" binding="#{emailInput}" ... 
    styleClass="#{emailInput.valid ? '' : 'error'}" />

(note that I fixed your label to be a real label; also note that you don't need to create some bean property at all as suggested by the answer of cubbuk)

Yes, this may produce quite some non-DRY boilerplate code in the view. You can abstract this away with a phase listener or a system event listener. You can also use OmniFaces <o:highlight> component which does all the job transparently. See also the live demo.

edited Jun 06 '14 at 08:06

answered Jan 22 '13 at 11:50

BalusC

1,082,665
372
3,610
3,555

Can you please explain me how theis .valid work and I have done validation in backing bean side, would it be applicable in that condition. Thnx for ur reply :) – Kush Sahu Jan 22 '13 at 13:11
As said, it's invoking the `UIInput#isValid()` method. Click the links in my answer to see the javadoc. It's just referring the input component in the component tree itself. You do not need any additional bean properties. As to doing validation in backing bean, it will only work if it runs during validations phase and throws a fullworthy `ValidatorException`. The example in your question already does that properly. Although I'd recommend putting it in a separate `Validator` class so that it's better reusable. – BalusC Jan 22 '13 at 13:12
Just a slight improvement: it's better to use `#{component.valid}` so you're not dependent on defined ID – Erveron Oct 16 '17 at 21:30
@James: `#{emailInput}` doesn't refer `id="emailInput"` in first place. – BalusC Oct 16 '17 at 22:00
@James: OP wants to reference it in ``. The `#{component}` in there won't reference the target ``. – BalusC Oct 17 '17 at 14:02
@BalusC: Right, in the label, there is really no other option (will read more carefully next time) – Erveron Oct 17 '17 at 14:11

score 1 · Answer 2 · answered Jan 22 '13 at 10:16

You need a field for representing the validation is failed in the backing bean. And according to that validation field's condition you may change the css of the uiComponents as shown below.

public void emailValidate(FacesContext context,
                UIComponent componentToValidate,
                Object value)
                throws ValidatorException
    {
       String email = value.toString();
       if (!Validator.isEmailAddress(email))
            {
                FacesMessage message =
                        new FacesMessage(FacesMessage.SEVERITY_ERROR, "Email", "Please enter valid email address");
                validationFailed = true;
                throw new ValidatorException(message);
            }
    }

public Boolean getValidationFailed()
{
    return validationFailed;
}

<style>
   .errorClass
   {
       background-color: red;
   }
   </style>
   <h:panelGroup>
      <h:outputText value="Email" styleClass="#{ozetPageBean.validationFailed ? 'errorClass' : ''}"/>
      <h:message for="emailInput"/>
      <h:inputText id="emailInput" 
                   value="#{ozetPageBean.email}" 
                   validator="#{ozetPageBean.emailValidate}"
                   styleClass="#{ozetPageBean.validationFailed ? 'errorClass' : ''}"/>
   </h:panelGroup>

How to change css class for the inputfield and label when validation fails?

2 Answers2

Linked