我有一个输入组件,它有三种类型的验证(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消息错误摘要的样式:在应用之前,我不希望在发生所需验证时应用它。
如果有任何建议可以在这种情况下更好地进行验证,请提出建议。
将redisplay
属性设置为false
。
<p:messages ... redisplay="false" />
这样它就不会重新显示以前已经显示的消息。一个显而易见的要求是,<p:messages>
组件本身被放置在所有这些<h|p:message>
组件之后。如果您确实需要在<h|p:message>
组件之前直观地定位它,请使用CSS和JS来重新定位它。
我在完成模糊事件时使用了以下JS函数,它运行良好:
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);
}
}
}