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

显示超过h：message

1 个答案: