在字段旁边显示 JSF 验证错误

Question

我想在文本字段旁边显示错误消息。

我能够显示错误消息，但所有错误消息同时出现...

<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>

如何修改代码以在文本字段旁边显示错误消息？

Answer 1

只需将 放在您需要查看的位置即可。例如

<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>

，或者

<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>

---

与具体问题无关，我建议查看。它最大限度地减少了丑陋的 HTML 表格样板。您的代码最终将如下所示：

<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>