3

3 種類の検証 (required、validatorMessage、converterMessage) を持つ入力コンポーネントがあり、この入力には独自のメッセージ アイコンがあり、フォーム全体には次のようにすべてのコンポーネントのすべてのメッセージを表示するメッセージ コンポーネントがあります。

<p:message for="idEstNumOfUser" display="icon" id="msgEstNumOfUser" />
                    <p:inputText id="idEstNumOfUser"
                            placeholder="Estimated Number of Users"
                            value="#{mybean.estimatedUserCount}" required="true" requiredMessage=""
                            maxlength="8" title="Estimated Number of Users"
                            validatorMessage="Please enter digits only for 'Estimated Number of Users'"
                            converterMessage="Please enter digits only for 'Estimated Number of Users'">
                            <f:convertNumber />
                    <p:ajax event="blur" update=":betasignup:msgEstNumOfUser" />
                    </p:inputText>

                    <p:messages id="messages"  autoUpdate="true"/>

エラーメッセージの前に、次のような警告アイコンを表示するスタイルがあります。

.ui-messages-error-summary:before{
                       font-family: FontAwesome;
                       speak: none;
                       font-style: normal;
                       font-weight: normal;
                       font-variant: normal;
                       text-transform: none;
                       line-height: 1;
                       -webkit-font-smoothing: antialiased;
                       content: "\f05a";
                       margin-right: 6px;
                    }

何が起きているか: 必要な検証が発生した場合にメッセージ コンポーネント用に生成される html は次のとおりです。

              <div class="ui-messages-error ui-corner-all">
              <span class="ui-messages-error-icon">
              </span>
              <ul>
               <li>
                 <span class="ui-messages-error-summary">
                 </span>
              </li>
             </ul>
            </div>

そのため、.ui-messages-error-summary:beforeのスタイルが適用され、必要な検証が発生したときにそれを適用したくありません。

この場合の検証を改善するための提案があれば、アドバイスしてください。

4

2 に答える 2

5

redisplay属性を に設定しますfalse。

<p:messages ... redisplay="false" />

この方法では、以前に表示されたメッセージを再表示しません。明らかな要件の 1 つは、<p:messages>コンポーネント自体をこれらすべてのコンポーネントの後に<h|p:message>配置することです。実際に<h|p:message>コンポーネントの前に視覚的に配置する必要がある場合は、CSS とおそらく JS を使用して再配置します。

于 2013-06-26T14:14:19.157 に答える