2

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>

The backing bean:

@ManagedBean
@ViewScoped
@Data
@EqualsAndHashCode(callSuper = false)
public class PaymentMethodsBean extends BaseBean implements Serializable {
    @Size(max = 2)
    @NotBlank
    private String ccExpMonth;
    ...
}
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
raven
  • 2,381
  • 2
  • 20
  • 44
  • afaik, jsf does not give its components a style class when it becomes invalid. Are you sure the other components are `h:` ones, not `p:` (PrimeFaces or other?) And if they are `h:`, do they have the same value in the `styleClass` attribute`? – Kukeltje May 19 '16 at 17:42
  • Yes, I'm sure all the dropdowns are `h:` and they do all have the same style – raven May 19 '16 at 19:31
  • post the code (xhtml AND java action method/serverside part) of a component that works. I cannot reproduce **any** plain jsf component getting a (jquery-ui) ui-state-error without any 'EL' logic in the style or styleClass attribute. – Kukeltje May 19 '16 at 22:52
  • Yes, you're right all plain jsf component doesn't set any css class on validation. – raven May 20 '16 at 15:33

1 Answers1

5

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

You have several options:

  1. Just use <p:selectOneMenu> instead of <h:selectOneMenu>.

    <p:selectOneMenu ...>

    Use if necessary CSS to restyle it.

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

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

    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.

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

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

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

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • While I think this is the valid answer (Should this not be marked a duplicate of http://stackoverflow.com/questions/12727666/conditional-style-in-jsf or http://stackoverflow.com/questions/12954249/jsf-highlight-label-for-invalid-input), the Q as it stands does not show the cause. 1 or 2 is not the case here, even after asking and 3 cannot cause this component to **not** get the style and others do... So as it standes, the Q does not show enough info to state what is actually causing the different behaviour – Kukeltje May 20 '16 at 08:27
  • @Kukeltje: Others are apparently PrimeFaces components (as indicated by 1st paragraph of the answer, the style will only be applied to PrimeFaces components). There's no other sensible cause for the described behavior. – BalusC May 20 '16 at 08:30
  • Could you elaborate more the option number 2 please? I've tried and it show it always red. Option 1 and 3 are not viable at the current state of the project. – raven May 20 '16 at 15:31
  • You mean to say that it already prints `ui-state-error` on initial request? Is your webapp manipulating the component tree in some way? – BalusC May 20 '16 at 15:42