Prevent p:messages component from showing messages which are already shown in p:message

Question

i have an input component that has three types of validation (required,validatorMessage,converterMessage) and this input has its own message icon, and the whole form has a messages component to display all the messages for all components as follows:

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

and i have a style before the error message that shows a warning icon as follows:

.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;
                    }

WHAT IS HAPPENING: the generated html for messages component in the case required validation occurs is:

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

so the style for .ui-messages-error-summary:before is applied, and i don't want it to be applied when required validation occurs.

if there are any suggestions to make validation better in this case, please advise.

Answer 1

Set redisplay attribute to false.

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

This way it won't redisplay messages which are already displayed before. One -obvious- requirement is that the <p:messages> component itself is placed after all those <h|p:message> components. If you actually need to position it visually before the <h|p:message> components, make use of CSS and perhaps JS to reposition it.

Answer 2

i used the following JS function oncomplete of blur event and it works fine:

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);
              }
            }
        }