如何在验证错误时将ui-state-error类设置为h：selectOneMenu

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>

支持豆：

@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" />
   

   如果您想自行种植它，请转到以下相关问题：在PhaseListener中修改JSF组件树。