Why the form id prefix in the h:message output?

Question

I'm currently trying simple validation using required="true"

    <h:form>
        <h:messages globalOnly="true"/>
        <h:panelGrid>
            <h:panelGrid columns="3">
                <f:facet name="header">
                    Login Application Sample
                </f:facet>

                <h:outputLabel for="UserId" value="User Id" />
                <h:inputText id="UserId" value="#{userBean.userId}" required="true" />
                <h:message for="UserId"/>

                <h:outputLabel for="Password" value="Password" />
                <h:inputSecret id="Password" value="#{userBean.password}" required="true" />
                <h:message for="Password" />

                <f:facet name="footer">
                    <h:commandButton value="Login" action="#{userBean.login}"/>
                    <h:commandButton type="reset" value="Reset"/>
                </f:facet>
            </h:panelGrid>
        </h:panelGrid>
    </h:form>

Leaving the fields blank, and then clickin on the login button, these error messages will display on the right side of each field :

j_idt7:UserId: Validation Error: Value is required.
j_idt7:Password: Validation Error: Value is required.

This is what I expected, but I don't want to display the form id prefix of 'j_idt7:'. I read book examples, they don't output the form id prefix. What I want is :

UserId: Validation Error: Value is required.
Password: Validation Error: Value is required.

What should I do to skip displaying the form id prefix in the component specific messages ?

I'm currently testing JSF 2 in glassfish v3.

Answer 1

The message label defaults to component's client ID, exactly the one as you can see in generated HTML output via rightclick, View Source. That j_id7 is in this particular case the client ID of the parent <form> element. If you give the JSF component a fixed ID like <h:form id="login"> then the labels will become login:UserId and login:Password respectively.

You can however use the input component's label attribute to override it altogether so that the message label will be shown exactly as you intented.

<h:inputText ... label="User ID" />
<h:inputSecret ... label="Password" />

If the input component's label attribute is present, then it will be used instead of the client ID. Using prependId="false" as suggested by other answers has disadvantages. Don't do that.

A completely different alternative is to use requiredMessage (or converterMessage or validatorMessage) attribute for this, but this doesn't allow parameterizing messages and thus you'd have to hardcode the labels and such.

<h:inputText ... label="User ID is required." />
<h:inputSecret ... label="Password is required." />

See also:

• Change the default message "Validation Error: Value is required" to just "Value is required"
• Getting the component id on the error validation message
• How to parameterize requiredMessage attribute in composite component?

---

Noted should be that it's indeed awkward to have labels duplicated like this:

<h:outputLabel for="userId" value="User ID" ... />
<h:inputText id="userId" ... label="User ID" />

<h:outputLabel for="password" value="Password" ... />
<h:inputSecret id="password" ... label="Password" />

If you happen to use JSF utility library OmniFaces, then you can use <o:outputLabel> to let JSF transparently set the label attribute of the associated component:

<o:outputLabel for="userId" value="User ID" ... />
<h:inputText id="userId" ... />

<o:outputLabel for="password" value="Password" ... />
<h:inputSecret id="password" ... />