Custom Validator for p:selectOneMenu make it not working rendering / not rendering other components

Question

I have this select:

<p:selectOneMenu  value="#{bean.val}">
    <f:selectItem itemValue="X" itemLabel="Select" />
    <f:selectItems value="#{bean.getVals()}" />
    <p:ajax update="wrapper" />
</p:selectOneMenu>

And this is the wrapper it updates:

<p:panel id="wrapper">
    <p:panel rendered="#{bean.val == 'A' or bean.val == 'B'}">
        <!-- insert your code here -->
    </p:panel> 
</p:panel>

The wrapper is outside the select, at the same level.

At the start, it's all ok. The wrapper is hidden.

If I select 'A' and then 'C', for example, the wrapper disappear. BUT, if I select 'A' or 'B' and 'X' again (the first "choice", Select), the wrapper does NOT disappear!

I have put a breakpoint inside the setter of bean.val. The setter in invoked for all the choices BUT for the first one the value inside the debugger is the same as the previous one!

BUT! If I remove the validator, it works!

This is the validator:

@FacesValidator(value="requiredSelect")
public class RequiredSelect implements Validator {
    protected MessageUtil messageUtil = new MessageUtil();
    
    @Override
    public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
        String val = (String) value;
        
        if ("X".equals(val)) {
            FacesMessage msg = this.messageUtil.getDefaultValidationError();
            throw new ValidatorException(msg);
        }
    }
}

Previously I used another validator:

@FacesValidator(value="requiredString")
public class RequiredString implements Validator {
    protected MessageUtil messageUtil = new MessageUtil();
    
    @Override
    public void validate(
        FacesContext context, 
        UIComponent component, 
        Object value
    ) throws ValidatorException {
        String val = (String) value;
        
        if (val == null || val.trim().isEmpty()) {
            FacesMessage msg = this.messageUtil.getDefaultValidationError();
            throw new ValidatorException(msg);
        }
    }
}

but it did not work, because the empty string was not saved to the backing bean at menu change. So, if, for example, you selected 'A' and then back '' (Select) and you try to submit the form, the select is signaled with errors, but the value of the select returns to be 'A'! So the bogus 'X' value.

I'm using Primefaces 3.4.1 and Mojarra 2.1.7

Answer 1

Your issue is a bit of a XY-problem. You are trying to hack your way out of creating a required p:selectOneMenu using the X select item. This requires you to create a validator. If you simply make the p:selectOneMenu required, and would use null as the itemValue of the placeholder, it prevents the need to handle the X, so you don't need a validator.

Selecting null will cause validation to fail. So, once a selection is made you no longer want to render the null placeholder. Normally one would use the hideNoSelectionOption attribute of the p:selectOneMenu. But this is not available in PrimeFaces 3.4.1. As you don't want to upgrade, you can add this behavior by creating a custom renderer for the SelectOneMenu.

Create a new class, say my.custom.MySelectOneMenuRenderer, and extend SelectOneMenuRenderer. In this you want to @Override the encodeInput method to something like:

protected SelectItem selectMeOption = new SelectItem(null, "Select");

@Override
protected void encodeInput(
    FacesContext context, SelectOneMenu menu, String clientId,
    List<SelectItem> selectItems, Object values, Object submittedValues,
    Converter converter
) throws IOException {
    String classes = menu.getStyleClass();
    Pattern pattern = Pattern.compile("\\bnormalSelect\\b");
    Matcher matcher = pattern.matcher(classes);
    boolean isNormal = matcher.find();
    Object value = menu.getValue();
    
    // If there's not a class "normalSelect" and no value is set, add the
    // null option as the first item
    if (!isNormal) {
        if (value == null) {
            selectItems.add(0, selectMeOption);
        }
        else {
            SelectItem firstOption = selectItems.get(0);
            
            if (selectMeOption.equals(firstOption)) {
                selectItems.remove(0);
            }
        }
    }
    
    super.encodeInput(
        context, menu, clientId, selectItems, values, submittedValues,
        converter
    );
}

Add your custom renderer to the render-kit section in your faces-config.xml like:

<render-kit>
  <renderer>
    <component-family>org.primefaces.component</component-family>
    <renderer-type>org.primefaces.component.SelectOneMenuRenderer</renderer-type>
    <renderer-class>my.custom.MySelectOneMenuRenderer</renderer-class>
  </renderer>
</render-kit>

View example:

<p:selectOneMenu value="#{bean.val}" layout="pageDirection">
    <f:selectItems value="#{bean.vals()}" />
    <p:ajax update="#{empty bean.val ? '@this' : ''}" />
</p:selectOneMenu>

For a working example see: https://github.com/jepsar/primefaces-test/blob/so_68457571/src/main/webapp/test.xhtml

See also:

• How to sort f:selectItems in each p:selectOneMenu of my application?

Answer 2

Please have a look at the JSF Life-Cycle for example here: https://www.torsten-horn.de/img/JSF-Lifecycle.gif

And you will note, that if you throw "Validator-Exceptions" the "Update Model Values" Phase is skipped. (Process Events forwards to render response).

Hence your value "X", which you consider invalid in your validator is never send to the bean, and therefore the wrapper won't vanish.

What you actually want is:

• Define a proper "NoSelect-Option"
• Make the field "required".

Then - upon submission - the required field will be considered empty and throw a validator-exception where you need it.

ps.: A neat way to just bypass this "Issue" is to use hideNoSelectionOption on the selectOneMenu - that way, the form starts with "Please select", but the user can't switch back to "Please select", once he made an choice:

<p:selectOneMenu  value="#{bean.val}" hideNoSelectionOption="#{not empty bean.val}">
    <f:selectItem itemValue="#{null}" itemLabel="Select" noSelectionOption="true" />
    <f:selectItems value="#{bean.getVals()}" />
    <p:ajax update="@this,wrapper" process="@this" />
</p:selectOneMenu>

Updated, added @this to p:ajax.

PS: this does not work with old versions of Primefaces that does not have hideNoSelectionOption

Answer 3

Ok, this is my solution, thanks to the dognose's answer first part:

1. Change the input to:

<p:selectOneMenu value="#{bean.val}" required="true">
    <f:selectItem itemValue="" itemLabel="Select" />
    <f:selectItems value="#{bean.getVals()}" />
    <p:ajax update="wrapper" />
</p:selectOneMenu>

No need to itemValue="#{none}", since null strings are automatically transformed to empty string by default, by jboss or primefaces, I do not remember. No need of noSelectionOption="true" too (I do not understand its scope... the validation works even if I don't put it)

2. added to a package my.package the files messages.properties, with this content:

javax.faces.component.UIInput.REQUIRED = Error
javax.faces.component.UIInput.REQUIRED_detail = One or more fields are missing or wrong. Please check the form

3. Then I added a p:messages like this one:

<p:messages id="messages" closable="true" showDetail="true" />

4. Then, I used this trick to remove the duplicate messages.