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

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>

3rd screenshot is after submitting by `h:form` button or by ajax? You can try processing 2nd menu value alongside first one when choosing an option `process="@this stageDescriptionInsertSelectId"`. — Geinmachi, Nov 11 '15 at 23:22
The 3rd is after the ajax submit. Is time that i select a item in 1st field and this field do a ajax to fill second field. I tried this solution and i didn t have success. I already try update de IDS field and form — Estevão Jordão, Nov 12 '15 at 00:18
Have you checked the posts under the 'related' header on the right (if you look at this post on a normal pc)? — Kukeltje, Nov 12 '15 at 10:12

score 0 · Answer 1 · edited May 23 '17 at 12:15

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?

You are welcome… and so effectively your question is a duplicate of that? — Kukeltje, Nov 12 '15 at 13:19

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

1 Answers1