Question

我有一个页面，其中表单字段分为多个面板，如地址，电话，主要细节等。我想保留一些面板为了外观和感觉折叠，而不是向下滚动。如果任何输入字段中存在任何验证错误，则在提交按钮上，然后取消折叠这些面板以显示错误。现在面板仍然因错误而崩溃，因此使用户对ui没有响应的原因感到困惑.xhtml如下

 <p:panel id="agencyAddressPanel" style="margin-bottom: 10px"
                toggleable="true" toggleSpeed="500" header="Address"
                collapsed="true" widgetVar="agencyAddress">
    <div class="Container25 Responsive25">
        <div class="ContainerIndent">
            <p:outputLabel for="city" id="cityLbl" style="float:left;"
                                            value="City:" />

        </div>
    </div>
    <div class="Container25 Responsive25">
        <div class="ContainerIndent">
            <h:column>
            <p:inputText styleClass="Wid80 Fleft" maxlength="30"
                id="city" placeholder="City" required="true"
                requiredMessage="Please enter City."
                value="#{manageAgencyBean.agency.latestAgencyAddress.city}"
                validatorMessage="City must allow alphanumeric, special character '-' and 3 - 40 characters long.">
            <f:validateLength minimum="3" maximum="40" />
            <f:validateRegex pattern="^[a-zA-Z0-9-. ]+$" />
        </p:inputText>
        <br />
        <p:message for="city" />
        </h:column>
    </div>
</div>
<p:commandButton id="updateBtn" value="Update"
icon="#{Locale['btn.img.edit']}" type="submit" update="@form"
action="#{manageAgencyBean.confirmSave}" styleClass="Fright">
</p:commandButton>
<p:confirmDialog widgetVar="confirmation"
  message="Are you sure you want to modify the Agency ?">
<h:panelGrid cellpadding="3" cellspacing="2" columns="2"
  styleClass="centeredPanelGrid">
    <p:commandButton value="#{Locale['btn.yes']}" type="submit"
        id="yesBtn" update=":agencyForm"
        action="#{manageAgencyBean.saveAgencyDetails}"
        oncomplete="PF('confirmation').hide();PF('statusDialog').hide()           javascript:window.location='#messages'"
        onstart="PF('statusDialog').show()" />
 <p:commandButton value="#{Locale['btn.no']}" type="button"
                        onclick="PF('confirmation').hide();PF('statusDialog').hide()" />
        </h:panelGrid>
</p:confirmDialog>

托管bean方法是

    public void confirmSave() {
        RequestContext context = RequestContext.getCurrentInstance();
        context.execute("PF('confirmation').show();");
    }
     public void saveAgencyDetails() {
         //dao call and other business here
     }

我正在使用confirmSave（）来调用确认小部件，该小部件将显示一个确认保存详细信息的对话框。完成此安排是为了在确认对话框之前触发验证。如果那些事情正在发挥作用，我的问题是如果出现验证错误消息则会崩溃并取消拆分面板。请帮忙。

Answer 1

我使用oncomplete="if (args && args.validationFailed) PF('agencyAddress').toggle()"来实现此目标

验证前：

验证后：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
</h:head>

<h:body>

    <h:form id="testForm" >
        Current Phase: #{facesContext.currentPhaseId.ordinal}
        PostBack: #{facesContext.postback}
        Validation failed: #{facesContext.validationFailed}
        <p:panel id="agencyAddressPanel" style="margin-bottom: 10px"
             toggleable="true" toggleSpeed="500" header="Address"
             collapsed="true"
             widgetVar="agencyAddress">
             <p:outputLabel for="city" id="cityLbl" style="float:left;"
                  value="City:" />
             <p:inputText styleClass="Wid80 Fleft" maxlength="30"
                id="city" placeholder="City" required="true"
                requiredMessage="Please enter City."
                value="#{testView.city}"
                validatorMessage="City must allow alphanumeric, special character '-' and 3 - 40 characters long.">
                <f:validateLength minimum="3" maximum="40" />
                <f:validateRegex pattern="^[a-zA-Z0-9-. ]+$" />
             </p:inputText>
        </p:panel>

        <p:commandButton action="#{testView.saveMyCity}" process="@form" update="@form" value="Save my city"
        oncomplete="if (args &amp;&amp; args.validationFailed) PF('agencyAddress').toggle()"/>

     </h:form>  

    </h:body>
</html>

My Managed Bean：

 @Named
 @ViewScoped
 public class TestView {


  private String city;

  public String getCity() {
    return city;
  }

 public void setCity(String city) {
    this.city = city;
 }

  public void saveMyCity(){
    System.out.println("city: "+city);
  }

 }

编辑：OP问

这是@Mahendran工作，唯一的警告是切换使其无法使用，这意味着如果面板已经打开[collapsed = false]然后它关闭面板，打败目的，我试图在oncomplete函数上添加更多约束。如果您有任何指示，请告诉我。

使用展开和折叠方法PF（'agencyAddress'）。expand（）和PF（'agencyAddress'）。collapse（）

 <p:commandButton action="#{testView.saveMyCity}" process="@form" update="@form" value="Save my city" oncomplete="if (args &amp;&amp; args.validationFailed) PF('agencyAddress').expand()"/>

使折叠p：面板在面板内的字段的验证错误上展开

1 个答案: