validation - 显示多个超过 h:message 的字段的 JSF 验证错误

Question

对多个输入字段进行验证的表单应显示时尚的错误消息，消息前面带有一个图标，包含在红色框中。

包含图标和消息的 h:panelGroup 必须仅在出现错误时才呈现。

只需一个经过验证的输入字段即可：

<h:panelGroup rendered="#{facesContext.validationFailed}"

但是对于多个输入字段，所有错误面板组都是可见的，即使是那些没有错误的面板组也只显示红色框内的图标而不显示文本。

Answer 1

我现在的解决方案是为每个输入设置一个验证器，并为每个验证器添加一个属性“validationFailed”。

<p:inputNumber id="mileage" validator="#{mileageValidator.validate}"></p:inputNumber>
<h:panelGroup rendered="#{mileageValidator.validationFailed}" styleClass="wizard-alert-box">
    <div class="wizard-alert-content-margin">
        <h:graphicImage name="attention.png"/>
        <h:message id="invalid-mileage" for="mileage" showSummary="true" showDetail="false"/>
    </div>
</h:panelGroup>

<p:calendar id="date" validator="#{dateValidator.validate}"></p:calendar>
<h:panelGroup rendered="#{dateValidator.validationFailed}" styleClass="wizard-alert-box">
    <div class="wizard-alert-content-margin">
        <h:graphicImage name="attention.png"/>
        <h:message id="invalid-date" for="date" showSummary="true" showDetail="false"/>
    </div>
</h:panelGroup>

这是验证器之一：

@Named("mileageValidator")
public class MileageValidator {

    @Getter
    private boolean validationFailed;

    public void validate(FacesContext context, UIComponent component, Object value) {
        validationFailed = value == null;
        if (validationFailed) {
            throw new ValidatorException(new FacesMessage("mileage empty"));
        }
    }
}