jsf - 如何将 ui-state-error 类设置为 h :selectOneMenu on validation error

Question

我网站上的所有下拉菜单都会发生一些奇怪的事情，当出现验证错误时，除 h:selectOneMenu 之外的所有输入都会获取此 css 类“ui-state-error”。我需要设置这个 css 类，以便在下拉列表无效时显示带有红色边框的下拉列表。这是下拉菜单:

 <div class="col-md-3 col-sm-3 col-xs-6">
  <div class="dd-arrow">
    <h:selectOneMenu id="ccExpMonth" styleClass="form-control" value="#{paymentMethodsBean.ccExpMonth}" label="#{lang['paymentmethods.expmonth']}">

      <f:selectItem itemLabel="" itemValue="#{null}" noSelectionOption="true" />
      <f:selectItems value="#{dropDownListBean.ccExpMonths}" var="ccExpMonth" itemLabel="#{ccExpMonth.desc}" itemValue="#{ccExpMonth.code}" />
    </h:selectOneMenu>
  </div>
  <p:message id="ccExpMonthMessage" for="ccExpMonth" styleClass="col-md-7 col-sm-6 col-xs-6" />
</div>

支持 bean:

@ManagedBean
@ViewScoped
@Data
@EqualsAndHashCode(callSuper = false)
public class PaymentMethodsBean extends BaseBean implements Serializable {
    @Size(max = 2)
    @NotBlank
    private String ccExpMonth;
    ...
}

Answer 1

ui-state-error类特定于 PrimeFaces。它只会应用于 <p:xxx>组件，而不是<h:xxx>组件。

您有多种选择:

1. 只需使用 <p:selectOneMenu>而不是<h:selectOneMenu> .

   <p:selectOneMenu ...>
   

   如有必要，请使用 CSS 重新设置样式。

2. 如果组件验证失败，则手动添加样式类。

   <h:selectOneMenu ... styleClass="#{component.valid ? '' : 'ui-state-error'}">
   

   请注意，代码是原样的。 #{component}指 EL 中的“当前组件”，如 this在 JavaScript 中。在输入组件上，这将引用 UIInput 的实例其中有 isValid() 方法。请记住在 ajax 渲染/更新中包含该组件。

3. 使用OmniFaces <o:highlight> 自动将样式类添加到任何验证失败的组件。

   <o:highlight styleClass="ui-state-error" />
   

   如果您想自己种植它，请前往此相关问题:Modifying JSF Component Tree in PhaseListener .