Faces validation not lost CSS style when fill out the field required - css

Question

I would like to have some help on the following problem and right now I am very grateful for the help and attention.
I have a form in JSF 2 / Primefaces 5.1 where a component updates another component in selection, both components are required.
My problem occurs after validation, is after I fill one of the fields, when this happens the component automatically populates the other field, however the validation style continues in the second component.
Please see the SS, for better better understanding:
Before the submit:
Stopping the fields required
Filling of the fields and re submit:
How can I change this behavior and make the style stay right in the second field, I've tried many ways and I am out of ideas, everything else works perfectly except the validation css
My Code:
<h:form id="stepInsertFormId" acceptcharset="UTF-8">
<p:panelGrid id="stepInsertPanelId" styleClass="formPanelGridPage" cellpadding="7" >
<p:row>
<p:column styleClass="adrGridLabel">
<p:outputLabel for="stageCodeInsertSelectId"
value="#{myMsg['common.stage']}"
title="#{myMsg['common.stage.title']}"
styleClass="myGridLabel" />
</p:column>
<p:column styleClass="adrGridInput" style="vertical-align: bottom;">
<p:selectOneMenu id="stageCodeInsertSelectId"
value="#{Step.stepInsert.selectedStage}"
var="stage"
converter="basedEntityConverter"
label="#{myMsg['common.stageCode.title']}"
filter="true"
required="true"
filterMatchMode="startsWith" >
<f:selectItem itemLabel="#{myMsg['common.select']}" itemValue="" />
<f:selectItems value="#{Step.stages}"
var="stageInsert"
itemLabel="#{stageInsert.id.stageCode}"
itemValue="#{stageInsert}" />
<p:column>
<h:outputText value="#{stage.id.stageCode}" />
</p:column>
<p:column>
<h:outputText value="#{stage.description}" />
</p:column>
<p:ajax event="change" process="#this"
update="stepInsertPanelId, :myMessagesId"
listener="#{Step.doReloadStepsInsert}" />
</p:selectOneMenu>
<p:spacer width="5px" height="1px"/>
<p:selectOneMenu id="stageDescriptionInsertSelectId"
value="#{Step.stepInsert.selectedStage}"
var="stage"
converter="basedEntityConverter"
filter="true"
required="true"
filterMatchMode="startsWith"
style="width:260px"
label="#{myMsg['common.stageDescription.title']}">
<f:selectItem itemLabel="#{myMsg['common.select']}" itemValue="" />
<f:selectItems value="#{Step.stages}"
var="stageInsert"
itemLabel="#{stageInsert.description}"
itemValue="#{stageInsert}" />
<p:column>
<h:outputText value="#{stage.id.stageCode}" />
</p:column>
<p:column>
<h:outputText value="#{stage.description}" />
</p:column>
<p:ajax event="change" process="#this"
update="stepInsertPanelId"
listener="#{Step.doReloadStepsInsert}" />
</p:selectOneMenu>
</p:column>

Answer 1

The problem is related to the life cycle of the update phase, the moment the ajax will upgrade the second field it loses the reference of ids, this behavior is already provided and there is a tag resetValue Primefaces, to work around this behavior:
this the final solution:
<p:ajax event="change" process="#this"
update="stageCodeInsertLabelId, stageCodeInsertSelectId
, stageDescriptionInsertSelectId
, :myMessagesId"
resetValues="true"
listener="#{Step.doReloadStepsInsert}" />
The default value is false.
This post helped me to understand and solve this problem behavior
How can I populate a text field using PrimeFaces AJAX after validation errors occur?