CODEWITHSUNDEEP
validationjsf-2message
newbie
newbie

Reputation: 227

Show JSF validation error next to the fields

I want to display the error messages beside the text fields.

I am able to show the error message but all the error messages come at once...

<h:form id="LoginForm">
        <table>
            <tr>
                <td colspan="4" id="login">
                    <h2 style="border-bottom: 1px solid #CCCCCC;">Login</h2>
                    <tr>
                        <td class="label"> 
                            <h:outputLabel for="email" value="Login Email:"></h:outputLabel>
                        </td>
                        <td class="field">
                            <h:inputText id="email"  size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:[email protected]" value="#{loginController.selected1.email}"> <f:validateLength maximum="70"></f:validateLength></h:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td class="label">
                            <h:outputLabel for="password" value="Password:"></h:outputLabel>
                        </td>
                        <td class="field">
                            <h:inputSecret id="password"  size="20" maxlength="50" required="true" requiredMessage="Please confirm your password" value="#{loginController.selected1.password}"><f:validateLength minimum="6" maximum="50"></h:inputSecret>
                        </td>
                    </tr>
                </td>
            </tr>
                <tr>
                    <td>
                        <h:commandButton value="Login" type="submit" action="#{loginController.checkValidUser()}"></h:commandButton>
                    </td>
                </tr>
        </table>

    </h:form>

How to modify the code to show error messages beside the text fields?

Upvotes: 2

Views: 11572

Answers (1)

BalusC
BalusC

Reputation: 1108537

Just put a <h:message> right there where you need to see it. E.g.

<tr>
    <td class="label"> 
        <h:outputLabel for="email" value="Login Email:"></h:outputLabel>
    </td>
    <td class="field">
        <h:inputText id="email"  size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:[email protected]" value="#{loginController.selected1.email}"> <f:validateLength maximum="70"></f:validateLength></h:inputText>
        <h:message for="email" />
    </td>
</tr>

or

<tr>
    <td class="label"> 
        <h:outputLabel for="email" value="Login Email:"></h:outputLabel>
    </td>
    <td class="field">
        <h:inputText id="email"  size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:[email protected]" value="#{loginController.selected1.email}"> <f:validateLength maximum="70"></f:validateLength></h:inputText>
    </td>
    <td class="message">
        <h:message for="email" />
    </td>
</tr>

Unrelated to the concrete problem, I suggest to have a look at <h:panelGrid>. It minimizes the ugly HTML table boilerplate. Your code would then end up like follows:

<h:form id="LoginForm">
    <h2>Login</h2>
    <h:panelGrid columns="3" columnClasses="label,field,message">
        <h:outputLabel for="email" value="Login Email:" />
        <h:inputText id="email" value="#{loginController.selected1.email}" size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:[email protected]">
            <f:validateLength maximum="70" />
        </h:inputText>
        <h:message for="email" />

        <h:outputLabel for="password" value="Password:" />
        <h:inputSecret id="password" value="#{loginController.selected1.password}" size="20" maxlength="50" required="true" requiredMessage="Please confirm your password">
             <f:validateLength minimum="6" maximum="50" />
        </h:inputSecret>
        <h:message for="password" />

        <h:panelGroup />
        <h:commandButton value="Login" action="#{loginController.checkValidUser()}" />
        <h:panelGroup />
    </h:panelGrid>
</h:form>

Upvotes: 3

Related Questions