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>组件。

您有几种选择：

只需使用<p:selectOneMenu>代替<h:selectOneMenu>。
```
<p:selectOneMenu ...>
```
使用必要的CSS来重新设置它。
如果组件验证失败，请手动添加样式类。
```
<h:selectOneMenu ... styleClass="#{component.valid ? '' : 'ui-state-error'}">
```
请注意代码是原样的。 #{component}在EL中引用“当前组件”，就像JavaScript中的this一样。在输入组件上，这将引用具有UIInput方法的isValid()实例。请记住将组件包含在ajax渲染/更新中。
使用OmniFaces <o:highlight>自动将样式类添加到任何未通过验证的组件。
```
<o:highlight styleClass="ui-state-error" />
```
如果您想自己移植，请转到相关问题：Modifying JSF Component Tree in PhaseListener。

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

1 个答案: