0
votes

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.

1
In your sample, I see only one. If there are more panelGroup and all look like <h:panelGroup rendered="#{facesContext.validationFailed}" they all will behave identical. - Holger
Yes, more than one. So what expression(s) can I use for the rendered attribute to make them behave differently like needed - dwe

1 Answers

0
votes

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