显示多个具有h：message的字段的JSF验证错误

Question

A form with validations on several input fields should show stylish error messages with an icon in front of the message contained in a red box.

The h:panelGroup containing icon and message must be rendered only in case of an error.

With just one validated input field this would work:

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

But with more than one input field all error panel groups are visible, even those without error showing no text but the icon in a red box.

Answer 1

My solution is now to have a validator for each input and add an attribute ´´validationFailed´´ to each validator.

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

And here is one of the validators:

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