如何在验证失败时更改输入字段和标签的css类？

Question

假设我有一个用户名来验证,在这种情况下,当验证失败时,我需要以红色显示用户名outputText和用户名inputText字段以及错误消息.

我试图在面板组中绑定所有这些,以便在验证失败时,所有字段都应该受到影响.但是简单地放置panelgroup是行不通的.

我的支持bean验证器

public void emailValidate(FacesContext context,
        UIComponent componentToValidate,
        Object value)
        throws ValidatorException {


    String email = value.toString();


    if (!Validator.isEmailAddress(email))
    {
        FacesMessage message =
                new FacesMessage(FacesMessage.SEVERITY_ERROR,"Email","Please enter valid email address");
                throw new ValidatorException(message);
    }


}

我的Jsf

<h:panelGroup>
<h:outputText value="Email"/>
<h:message for="emailInput/>
<h:inputText id="emailInput" value="#{mybean.email}" validator="#{mybean.emailValidate}"/>
</h:panelGroup>

Answer 1

通过binding属性将输入组件绑定到视图.它将作为UIInputEL中的组件引用提供,因此您可以使用UIInput#isValid()in styleClass属性.

<h:outputLabel for="emailInput" value="Email" 
    styleClass="#{emailInput.valid ? '' : 'error'}" />

<h:inputText id="emailInput" binding="#{emailInput}" ... 
    styleClass="#{emailInput.valid ? '' : 'error'}" />

(请注意,我将您的标签修复为真正的标签;另请注意,根据cubbuk的回答,您根本不需要创建一些bean属性)

是的,这可能会在视图中产生一些非DRY样板代码.您可以使用阶段侦听器或系统事件侦听器来抽象它.您还可以使用OmniFaces <o:highlight>组件,它可以透明地完成所有工作.另请参见现场演示.