validation - validacion - Evite que el componente p: messages muestre mensajes que ya se muestran en p: mensaje

validacion de formularios jsf

Question

Tengo un componente de entrada que tiene tres tipos de validación (requerido, validatorMessage, converterMessage) y esta entrada tiene su propio ícono de mensaje, y el formulario completo tiene un componente de mensajes para mostrar todos los mensajes para todos los componentes de la siguiente manera:

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

y tengo un estilo antes del mensaje de error que muestra un icono de advertencia de la siguiente manera:

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

QUÉ ESTÁ PASANDO : el componente html generado para mensajes en el caso que se requiere validación es:

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

por lo que se aplica el estilo para .ui-messages-error-summary: before , y no quiero que se aplique cuando se produce la validación necesaria.

Si hay alguna sugerencia para mejorar la validación en este caso, por favor avise.

Answer 1

Establecer el atributo de redisplay a redisplay a false .

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

De esta forma, no volverá a mostrar los mensajes que ya se han mostrado anteriormente. Un requisito obvio es que el componente <p:messages> mismo se coloque después de todos esos componentes <h|p:message> . Si realmente necesita ubicarlo visualmente antes de los componentes <h|p:message> , use CSS y quizás JS para reposicionarlo.

Answer 2

Utilicé la siguiente función JS en el evento de desenfoque completo y funciona bien:

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