防止 p:messages 组件显示已在 p:message 中显示的消息答案

【问题标题】：Prevent p:messages component from showing messages which are already shown in p:message防止 p:messages 组件显示已在 p:message 中显示的消息
【发布时间】：2013-06-23 10:49:00
【问题描述】：

我有一个输入组件，它具有三种类型的验证（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 的样式已应用，我不希望在需要验证时应用它。

如果有任何建议可以在这种情况下更好地进行验证，请提出建议。

【问题讨论】：

标签： validation jsf-2 primefaces messages

【解决方案1】：

将redisplay 属性设置为false。

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

这样它就不会重新显示之前已经显示的消息。一个明显的要求是<p:messages> 组件本身被放置在所有<h|p:message> 组件之后。如果您确实需要在视觉上将其定位在 <h|p:message> 组件之前，请使用 CSS 或者 JS 重新定位它。

【讨论】：

【解决方案2】：

我使用了以下 JS 函数 oncomplete of blur 事件，它工作正常：

function hideRequiredMessage(){
            var ErrorMessagesSpans= document.getElementById("myform:messages").getElementsByClassName("ui-messages-error-summary");
            if(ErrorMessagesSpans!=null && ErrorMessagesSpans.length > 0){
            var ErrorMessageSpan=ErrorMessagesSpans[0];
               if(ErrorMessageSpan.innerHTML==''){
                  //ErrorMessageSpan.className = '';
                   ErrorMessageSpan.parentNode.removeChild(ErrorMessageSpan);
              }
            }
        }

【讨论】：