Home/ Questions/Q 7091505
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T08:11:37+00:00

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

  • 0

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:yourid@domain.com" 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:yourid@domain.com" 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:yourid@domain.com" 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:yourid@domain.com">
            <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>
    • 0