f:ajax validation shows only one message at once - validation

Question

I'm working on JSF form with field validation.
<h:form>
<h:panelGrid id="panel" styleClass="data_table_pricing" columns="3">
<h:outputText value="Title"/>
<h:inputText id="title" value="#{pricingForm.title}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="title_message" for="title" style="color:red"/>
<!-- // -->
<h:outputText value="First name"/>
<h:inputText id="first_name" value="#{pricingForm.firstName}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="first_name_message" for="first_name" style="color:red"/>
<!-- // -->
<h:outputText value="Last name"/>
<h:inputText id="last_name" value="#{pricingForm.lastName}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="last_name_message" for="last_name" style="color:red"/>
<!-- // -->
</h:panelGrid>
<h:commandLink value="reset" class="link" type="reset" style="margin: 20px;">
<f:ajax execute="#form" render="#form"/>
</h:commandLink>
<h:commandLink value="Next" class="link" style="margin: 20px;" actionListener="#{pricingForm.calculatorPage()}">
<f:ajax execute="#form" render="#form"/>
</h:commandLink>
</h:form>
When I insert into several input fields big values I see only one error message. Looks like when the form is rendered the old values are not saved. San you help me to solve this?

Answer 1

This,
<f:ajax event="change" render="#form"/>
means the same as: "when the value of the current input is changed, submit and process only the current input and update the whole form".
So, other inputs aren't processed/validated, and the update basically clears out previous messages.
You likely meant to update only the associated message. E.g. in case of your first input:
<f:ajax render="title_message" />
I only omitted event="change" as that's the default already in <h:inputXxx> components.
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes