css - 填写必填字段时面对验证不丢失 CSS 样式

Question

我想在以下问题上得到一些帮助，现在我非常感谢您的帮助和关注。

我在 JSF 2/Primefaces 5.1 中有一个表单，其中一个组件更新选择中的另一个组件，这两个组件都是必需的。

我的问题发生在验证之后，是在我填写其中一个字段之后，当发生这种情况时，组件会自动填充另一个字段，但是验证样式会在第二个组件中继续。

请查看 SS，以便更好地理解:

提交前:

停止必填字段

填写字段并重新提交:

我怎样才能改变这种行为并使样式在第二个字段中保持正确，我已经尝试了很多方法但我没有想法，除了验证 css 之外其他一切都很完美

我的代码:

<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

问题与更新阶段的生命周期有关，ajax 更新第二个字段的那一刻它失去了 ids 的引用，这个行为已经提供并且有一个标签 resetValue Primefaces，解决此行为:

这是最终的解决方案:

<p:ajax event="change" process="@this" 
                                                       update="stageCodeInsertLabelId, stageCodeInsertSelectId
                                                                                     , stageDescriptionInsertSelectId
                                                                                     , :myMessagesId"
                                                       resetValues="true"
                                                       listener="#{Step.doReloadStepsInsert}" />

默认值为假。

这篇文章帮助我理解和解决了这个问题行为

How can I populate a text field using PrimeFaces AJAX after validation errors occur?