フィールドの隣に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: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> 

...一度来ますか？

Answer 1

ちょうどそこに<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>