Показать ошибку проверки JSF рядом с полями - PullRequest
Новая
       15

Показать ошибку проверки JSF рядом с полями

2 голосов
/ 24 января 2012

Я хочу отобразить сообщения об ошибках рядом с текстовыми полями.

Я могу показать сообщение об ошибке, но все сообщения об ошибках приходят одновременно ... 

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

Какизменить код для отображения сообщений об ошибках рядом с текстовыми полями?

1 Ответ

2 голосов
/ 24 января 2012

Просто положите <h:message> туда, где вам нужно его увидеть. Э.Г. 

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

или 

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

Не имеющая отношения к конкретной проблеме, предлагаю взглянуть на <h:panelGrid>. Это минимизирует уродливый шаблон таблицы 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: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>
...