Slides from my JavaOne 2011 conference talk in San Francisco.

Highlighting an input field that failed validation (or conversation) is a common UI practice today. This sort of functionality is not available in JSF (nor RichFaces) out of the box (Seam does have it). I got an email from RichFaces 4 workshop attendee from CONFESS_2011 conference asking how to do it and I thought it’s a good idea to make it blog post. It turns out, implementing such functionality is pretty simple. All we need to do is check if a particular field (component) is valid and then render or not render a style for the input field.

Let’s start with the Java bean:

@ManagedBean
@RequestScoped
public class Bean implements Serializable {
 
   private String text; // getter and setter
 
   public boolean isInputValid (){
      FacesContext context = FacesContext.getCurrentInstance();
      UIInput input = (UIInput)context.getViewRoot().findComponent(":form:input");
      return input.isValid();
   }
}

Inside isInputValid, we are searching for a particular component and checking whether it’s valid or not.

JSF page:

<h:head>
<style>
.inputInvalid {
   border: 2px solid red;
}
</style>
</h:head>
<h:body>
   <h:form id="form">
      <h:panelGrid columns="2">
         <h:outputText value="Text:" />
	 <h:panelGroup id="inputGroup">
	    <h:inputText id="input" value="#{bean.text}" 
               styleClass="#{bean.inputValid?'':'inputInvalid'}" 
               required="true" requiredMessage="Value required">
		<a4j:ajax event="blur" render="inputGroup"/>
	    </h:inputText>
	    <h:message for="input" style="padding: 0.5em"/>
	 </h:panelGroup>
      </h:panelGrid>
   </h:form>
</h:body>

Everything important happens here:

styleClass="#{bean.inputValid?'':'inputInvalid'}"

If the component is invalid (validation has failed), then we will render inputInvalid CSS class. Otherwise, nothing is rendered.

This is the result when running the page (before invoking validation):

After validation:

As you can see the solution is pretty simple.

A reader asked me to provide plain JSF and RichFaces template to run on JBoss AS. As JBoss AS already comes with JSF libraries, just delete the two JSF Jars (jsf-api.jar, jsf-impl.jar) and you will be ready to go. Or, follow the steps below to download and import the project. Again, this is just plain JSF/RichFaces project, no Seam, Hibernate, JPA. It’s a good starting point if you want to try RichFaces.

How to import
I tested this on Eclipse 3.5 with JBoss Tools. I will assume that you already have JBoss AS registered in Eclipse.

1. Download the the template file
2. In Eclipse, select File/Import
3. Select General/Existing Project into Workspace, click Next
4. Check ‘Select archive file:’ option
5. Click Browser… and point to the downloaded file
6. Click Finish
7. Deploy the project to JBoss AS.
8. Run the application, you should see “Hello, looks like it’s working” message (image below).