填写所需字段时,面部验证不会丢失CSS样式

时间:2015-11-11 22:57:08

标签: css jsf jsf-2 primefaces

我想对以下问题有所帮助,现在我非常感谢您的帮助和关注。

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

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

请参阅SS,以便更好地理解:

提交之前:

enter image description here

停止所需字段

enter image description here

填写字段并重新提交:

enter image description here

如何更改此行为并使样式在第二个字段中保持正确,我已经尝试了很多方法而且我没有想法,除了验证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>

1 个答案:

答案 0 :(得分:0)

问题与更新阶段的生命周期有关,当ajax升级第二个字段时它失去了id的引用,这个行为已经提供并且有一个标签 resetValue Primefaces,解决这个问题:

这是最终解决方案:

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

默认值为false。

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

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