CODEWITHSUNDEEP
cssvalidationjsffaceletshighlight
Kush Sahu
Kush Sahu

Reputation: 399

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

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>

Upvotes: 1

Views: 7950

Answers (2)

BalusC
BalusC

Reputation: 1108742

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.

Upvotes: 10

cubbuk
cubbuk

Reputation: 7920

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>

Upvotes: 1

Related Questions