Hi there
I have a small JSF application where the user is required to enter some
data about themselves.
For each component on the page that has required="true" I want to show an icon depending if there is
data in the field or not.
My problem is that when the page is initially shown all fields are valid, even if they do not have any
data in them.
So my question is how I can set a component to be invalid based on if there is
data in the field or not?
After a submit of the page (or after the component loses focus) the icon is shown properly, it is only on the initial page load I have a problem. (i.e there is no post data)
Here is my xhtml for a component that needs to be validated:
<s:decorate id="employeeIdDecoration" template="/general/util/errorStyle.xhtml">
<ui:define name="label">#{messages['userdetails.employeeId']}</ui:define>
<h:inputText value="#{authenticator.user.employeeId}" required="true">
<a4j:support event="onblur" reRender="employeeIdDecoration" bypassUpdates="true"/>
</h:inputText>
the template:
<s:label styleClass="#{invalid?'error':''}">
<ui:insert name="label"/>
<s:span styleClass="required" rendered="#{required}">*</s:span>
</s:label>
<span class="#{invalid?'error':''}">
<s:validateAll>
<ui:insert/>
</s:validateAll>
<h:graphicImage value="/resources/redx.png" rendered="#{invalid}"
height="16"
width="16"
style="vertical-align:middle;"/>
<h:graphicImage value="/resources/Checkmark.png" rendered="#{!invalid}"
height="16"
width="16"
style="vertical-align:middle;"/>
</span>
Any help will be appreciated.
