如何在验证错误时将ui-state-error类设置为h:selectOneMenu [英] how to set ui-state-error class to h:selectOneMenu on validation error

问题描述

我的网站上的所有下拉列表都发生了奇怪的事情，当发生验证错误时，除h:selectOneMenu之外的所有输入都会得到此CSS类"ui-state-error".我需要设置此CSS类，以便在无效时可以用红色边框显示下拉列表.这是下拉列表:

Something weird is happening to all the dropdowns on my website, when there is validation error all the inputs, except the h:selectOneMenu, gets this css class "ui-state-error". I need to set this css class so I can display the dropdown with a red border when it is invalid. This is the dropdown:

 <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;
    ...
}

推荐答案

ui-state-error类特定于PrimeFaces.它将仅应用于<p:xxx>组件，不适用于<h:xxx>组件.

The ui-state-error class is specific to PrimeFaces. It will only be applied to <p:xxx> components, not to <h:xxx> components.

您有几种选择:

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

<p:selectOneMenu ...>

必要时使用CSS重新设置其样式.

Use if necessary CSS to restyle it.

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

Manually add the style class if component has failed its validation.

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

请注意，代码是原样. #{component}引用EL中的当前组件"，就像JavaScript中的this一样.在输入组件上，这将引用 ，其中具有 isValid() 方法.请记住将组件包括在ajax渲染/更新中.

Note that the code is as-is. The #{component} refers "current component" in EL, like as this in JavaScript. On input components, this will reference an instance of UIInput which has an isValid() method. Keep in mind to include the component in ajax render/update.

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

Use OmniFaces <o:highlight> to automatically add the style class to any component which has failed its validation.

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

如果您想自行种植，请前往以下相关问题:修改JSF组件PhaseListener中的树.

If you want to homegrow it yourself, head to this related question: Modifying JSF Component Tree in PhaseListener.

这篇关于如何在验证错误时将ui-state-error类设置为h:selectOneMenu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！