JSF h:inputText validation and f:ajax render

Question

A very simple JSF applicaton:

• InputText element is assigned with Validator.
• f:ajax is used to render next element (phoneNumber) by using blur event.
• PhoneNumber will only be displayed if inputText pass the validator and isValid boolean value is set to true

Here is the code snippet

<h:form id="invOrdersWizForm">                                  
    <h:inputText id="name" maxlength="9" styleClass="ordLabelNarrow"
        validator="#{person.validatePerson}"                                
        value="#{person.name}">
        <f:ajax render="phoneLabel" event="blur"/>                                                              
    </h:inputText>  
    <h:outputText id="phoneLabel"
        rendered="#{person.isValid}"                        
        styleClass="ordLabelWide" value="#{person.phoneNumber}" />
</h:form>

ManagedBean

public void validatePerson(FacesContext context, UIComponent toValidate, Object value) {
    name = ((String) value).toUpperCase();
    phoneNumber = "12345678";
    isValid = true;
}

The problem is, for some reason, the phoneNumber is not rendered at all.

The only way that I can make it work is by changing f:ajax to render @form

<h:inputText id="name" maxlength="9" styleClass="ordLabelNarrow"
    validator="#{person.validateSecurityCode}"                              
    value="#{person.name}">
    <f:ajax render="@form" event="blur"/>                                                               
</h:inputText>  

Or remove rendered from phoneNumber

    rendered="#{person.isValid}"

For some reason f:ajax with specific element Id and rendered based on managedBean Attribute cannot co-exist.

Any idea or advice guys?

NOTE: this behaviour also happen when I use listener instead of validator

Solution

The f:ajax operates at the client side. The element which is specified in render must be already present in the client side HTML DOM tree. Put it in for example a h:panelGroup instead which is always rendered to the client side.

<h:panelGroup id="phoneLabel">
    <h:outputText rendered="#{person.isValid}" value="#{person.phoneNumber}" />
</h:panelGroup>