是否可以有一个带有验证的表单并使用 rich:modalPanel 进行数据输入？答案

【问题标题】：Is it possible to have a form with validation and to use rich:modalPanel for data entry too?是否可以有一个带有验证的表单并使用 rich:modalPanel 进行数据输入？
【发布时间】：2012-02-14 10:11:13
【问题描述】：

Richfaces 3.3.3，Jsf 1.2：

我有一个a4j:form，它使用一些简单的验证，主要是required="true"，以确保在没有一些必要数据的情况下不会提交表单。

我还有一些复杂的数据要（可选地）添加到表单中，所以我认为最好的方法是使用a4j:commandButton 来显示rich:modalPanel，用户可以在其中创建复杂的数据集。

创建的数据也会显示在h:selectManyListbox 中，当modalPanel 关闭时会重新渲染。

至少是这样的计划。我有以下问题：

reRender 有效，但前提是我阻止通过 immediate="true" 进行验证 - 这反过来似乎阻止了从 modalPanel 中选择的数据出现在支持 Bean 中
如果我删除立即标记，数据会更新，但前提是没有验证错误

让这个以我想要的方式工作的最佳方法是什么？还有其他更好的方法吗？

更新：

验证失败是在表单的某个不同部分，而不是在通过 modalPanel 输入的数据中，后者显示在 Listbox 中

代码：

模态面板：

<rich:modalPanel id="addTrimming" domElementAttachment="parent" width="150" height="130">
    <f:facet name="header">
        <h:panelGroup>
            <h:outputText value="Define Filter" />
        </h:panelGroup>
    </f:facet>
    <f:facet name="controls">
        <h:panelGroup>
            <h:graphicImage value="/images/close.gif" styleClass="hidelink" id="hidelinkAddTrimming"/>
            <rich:componentControl for="addTrimming" attachTo="hidelinkAddTrimming" operation="hide" event="onclick"/>
        </h:panelGroup>
    </f:facet>

    <h:panelGrid id="trimsettings" columns="3">
        <h:outputText value="Target:" style="font-weight:bold"/>
        <h:inputText id="target" label="XML Filename" required="true" value="#{xmlCreator.trimTarget}">
        </h:inputText>
        <h:outputText value=""/>

        <h:outputText value="Mode:"/>
        <h:selectOneMenu value="#{xmlCreator.trimMode}">
            <f:selectItem itemLabel="Quality" itemValue="quality"/> 
            <f:selectItem itemLabel="after Primer" itemValue="afterPrimer"/> 
            <f:selectItem itemLabel="fixed" itemValue="fixed"/>
            <f:selectItem itemLabel="Median length" itemValue="median"/>
            <f:selectItem itemLabel="Motif" itemValue="motif"/>
        </h:selectOneMenu>
        <h:outputText value=""/>

    </h:panelGrid>

    <h:panelGroup>
        <a4j:commandButton value="OK" action="#{xmlCreator.createTrimming}" onclick="from:submit()">
            <a4j:support event="oncomplete" ajaxSingle="true" immediate="true" reRender="trimsPanel"/>
        </a4j:commandButton>
    </h:panelGroup>
</rich:modalPanel>

相关表格部分：

<h:outputText value="Trimming:"/>
<a4j:outputPanel id="trimsPanel">
    <h:selectManyListbox id="trims" value="#{xmlCreator.selectedTrimmings}">
        <f:selectItems value="#{si:toSelectTrimmingList(xmlCreator.trimmings)}"/>
    </h:selectManyListbox>
</a4j:outputPanel>
<a4j:commandButton id="addTrimButton" immediate="true" value=" + Trimming">
    <rich:componentControl for="addTrimming" attachTo="addTrimButton" operation="show" event="onclick"/>
</a4j:commandButton>

【问题讨论】：

为什么要在列表框中显示不正确的数据？
列表框中的数据不正确。其他部分验证失败，列表框只是表单的一部分。
所以把它分成不同的形式。

标签： java richfaces jsf-1.2

【解决方案1】：

如果您以一种形式执行此操作，则应将其分为两种：一种将是您的主要形式，另一种将是模态面板内的形式。因此，您将能够独立于主表单提交模态面板，并且模态面板中的提交按钮将如下所示：

<a4j:commandButton value="OK" action="#{xmlCreator.createTrimming}" reRender="trimsPanel"/>

【讨论】：

【解决方案2】：

当使用a:commandButton 或a:commandLink 关闭面板时，您应该使用带有立即数的进程将模态面板的数据发送到bean。为此，模态面板数据必须按预期有效，因此您将获得有效的新数据并将其添加到 h:selectManyListBox 的 bean 值并重新渲染 h:selectManyListBox。

这应该可以。如果不是，请发布您的 a:form 和 modalPanel 代码以进行检查。

【讨论】：