Question

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.

Answer 1

You can:

• on window.onload() iterate all inputs with javascript and trigger the blur event
• on window.onload() call <a4j:jsFunction> which reRenders a parent <h:panelGroup> to all the inputs.