所需的验证取决于特定的按钮在向导中不起作用 [英] Required validation depending on specific button not working in Wizard

问题描述

我正在尝试在中使用BalusC的答案这篇文章，但是当我尝试使所需条件取决于向导，我正在使用它来控制向导的后退"和下一步".如何做到这一点?

I'm trying to implement the answer from BalusC in this post, but it is not working when I try to make the required condition depend on a button outside a Wizard, that I'm using to control the "back" and "next" of the wizard. How can achieve this?

<h:form id="form" enctype="multipart/form-data" acceptcharset="ISO-8859-1" >  

    <p:growl id="growl" sticky="true" showDetail="true"/>  

    <p:wizard id="wizard" flowListener="#{myBean.onFlowProcess}" showNavBar="false" widgetVar="wizardWV"> 

        <p:tab id="tab1" title="Tab 1"  >  
            <p:panel header="Panel for tab 1">  

                <p:message for="year" />
                <br /> 

                <table>
                    <tr>
                        <td>
                            <h:outputLabel value="Year: "  />
                        </td>
                        <td>
                            <p:inputMask 
                                id="year"
                                value="#{myBean.year}" 
                                required="#{not empty param[nextPanel.clientId]}"
                                requiredMessage="Year is required!"
                                style="width:70px;"  
                                mask="9999" 
                                maxlength="4" 
                            />
                        </td>
                    </tr>
                </table>
            </p:panel>
        </p:tab>

        <p:tab id="tab2" title="Tab 2"  >  
            <p:panel header="Panel for tab 2">  
            </p:panel>
        </p:tab>

    </p:wizard>

    <p:commandButton id="backPanel"  value="Back" onclick="PF('wizardWV').back();" styleClass="internalButton"  />
    <p:commandButton id="nextPanel" binding="#{nextPanel}" value="Next" onclick="PF('wizardWV').next();" styleClass="internalButton" />

</h:form> 

推荐答案

为什么尚未回答此问题? 就像@BalusC所说的那样，答案很简单，只需输入@process="this"

why this question has not been answered? like @BalusC said, the answer is simple, just put @process="this"

<h:form>
    <p:wizard id="wizard" showNavBar="false" widgetVar="wizardWV">
        <p:tab id="tab0" title="Tab 0">
            <p:panel header="Panel for tab 0">
                blablabla
            </p:panel>
        </p:tab>

        <p:tab id="tab1" title="Tab 1">
            <p:panel header="Panel for tab 1">
                <p:message for="year" />
                <br />

                <h:panelGrid columns="2">
                    <h:outputLabel value="Year: " />
                    <p:inputMask id="year" value="#{myBean.year}" required="true"
                        requiredMessage="Year is required!" style="width:70px;" mask="9999"
                        maxlength="4" />
                </h:panelGrid>
            </p:panel>
        </p:tab>

        <p:tab id="tab2" title="Tab 2">
            <p:panel header="Panel for tab 2">
                blablabla
            </p:panel>
        </p:tab>
    </p:wizard>

    <p:commandButton value="Back" onclick="PF('wizardWV').back();" />
    <p:commandButton process="@this" value="Next" onclick="PF('wizardWV').next();" />
</h:form>

或更好，以避免重复的ajax请求

or better, to avoid duplicate ajax request

<p:commandButton type="button" value="Back" onclick="PF('wizardWV').back();" />
<p:commandButton type="button" value="Next" onclick="PF('wizardWV').next();" />

但是在这种情况下，我真的看不到为向导使用自定义导航栏的意义.

but i really don't see the point in using a custom nav bar for wizard in this case.

如果您通过提及设计"来表示皮肤"，那么正确的方法是覆盖PF CSS样式:

if you mean "skin" by mentioning "design", the right approach is to override PF CSS styles:

Wizard resides in a container element that style and styleClass attributes apply.
Following is the list of structural css classes.

Selector               Applies
.ui-wizard             Main container element.
.ui-wizard-content     Container element of content.
.ui-wizard-step-titles Container of step titles.
.ui-wizard-step-title  Each step title.
.ui-wizard-navbar      Container of navigation controls.
.ui-wizard-nav-back    Back navigation control.
.ui-wizard-nav-next    Forward navigation control.

但是，如果您真的要说设计"(意在像功能/功能一样)，是的，您可以通过向导的小部件"与向导进行交互，并且像您一样定义自己的控件. 在您的特定情况下，我没有看到设计"上的区别，而是看到了向导组件的标准行为，在该行为下，按下下一个按钮即可处理当前向导选项卡(并验证其所有组件).

But if you really mean "design", intended like features/functionalities, yes, you can interact with wizard by its "widget" and, like you did, define your own controls. In your specific case i don't see a "design" difference, i see a standard behavior of the wizard component, where current wizard tab is processed (and all its components validated) on next button pressed.

仅对处理过的组件(位于执行列表内)触发确认(仅)，您可以使用任何ajax组件/事件的process="..."属性来控制此列表.

Validation is triggered ONLY for processed components (that are inside execution list), and you may control this list with process="..." attribute of any ajax component/event.

您可能想要的是在该页面中更改另一个组件的默认行为，该页面包含进程@all或@form.

What you probably want is to change the default behavior of another component in that page wich processes @all or @form.

从您的评论中说，该页面中至少有另一个具有ajax行为的组件，例如p:autocomplete，并且很可能您正在使用PF< 4.0.

From what you say in your comment, you have at least another component in that page which has an ajax behavior, like a p:autocomplete and, probably, you are using PF < 4.0.

在这种情况下，您可以将process="@this"添加到p:autocomplete，以防止处理(然后验证)向导选项卡中的其他组件，例如p:inputMask.

In this case you can add process="@this" to the p:autocomplete to prevent processing (and then validation) of other components inside the wizard tab, like your p:inputMask.

@Erick，我想到的第一件事是:

@Erick, the first thing that comes into my mind is this:

<p:wizard binding="#{wizardComponent}" ...>
    <p:tab id="tab0" ...>
        ...
    </p:tab>
    ...
</p:wizard>
<p:commandButton rendered="#{wizardComponent.step != 'tab0'}" value="Back" onclick="PF('wizardWV').back();" />

这篇关于所需的验证取决于特定的按钮在向导中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！