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

  • Z时代
  • 2024-01-10
  • 分类：问答

假设我有一个要验证的用户名，在这种情况下，当验证失败并显示错误消息时，我需要用红色显示用户名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>

回答：

通过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>组件来透明地完成所有工作。。

以上是 验证失败时，如何更改输入字段和标签的CSS类？ 的全部内容， 来源链接： utcz.com/qa/399304.html

回到顶部