Validation on a JSF readonly input

Goal

Add validation to JSF input that cannot be changed directly by the user

Description

In one of my last projects, I had a table where some of the columns contained input fields that should contribute to a sum at the end of that table (a total row, at the end of the table) and that total could not be higher than a specific value.

I needed to present a message next to that column value but since JSF (naturally) does not allow validations to be associated to output values, I found out a nice trick in Stackoverflow explained by BalusC, which I post here as a recipe for my future reference, which basically consists on specifying an input value as readonly but only on the render response phase with the corresponding validator, as needed.

How to

Define your input component as follows (in this case, I use Omnifaces’ constants to make the code prettier):

<o:importConstants type="javax.faces.event.PhaseId" />
...
<p:inputText id="total"
  value="#{row.total}"
  styleClass="readonly"
  readonly="#{facesContext.currentPhaseId eq PhaseId.RENDER_RESPONSE}"
  validator="totalValidator">
  <f:attribute name="controller" value="#{myController}" />
</p:inputText>

And that’s pretty much it. The validator attribute is a normal JSF validator class which performs its specific validation logic. Additionally, and just to disguise the component to look like an input text, I have also specified the following css definition:

input.readonly,
input.readonly.ui-state-focus {
    background: none;
    box-shadow: none;
    border: none;
}

Explanations

With this trick, the input component is specified as a normal validator throughout the whole JSF lifecycle except on the render phase, meaning that the validation against the input is performed and still, the component is shown as readonly, therefore leading us to the result we wanted to achieve in the beginning.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s