Add CSV Complex Validation

melloware · Jan 9, 2025 · 48ffc4b · 48ffc4b
1 parent 0dfc6ae
commit 48ffc4b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 18 deletions.
diff --git a/src/main/java/org/primefaces/showcase/menu/AppMenu.java b/src/main/java/org/primefaces/showcase/menu/AppMenu.java
@@ -466,6 +466,7 @@ public void init() {
         List<MenuItem> clientSideValidationMenuItems = new ArrayList<>();
         clientSideValidationMenuItems.add(new MenuItem("Basic", "/ui/csv/basic"));
         clientSideValidationMenuItems.add(new MenuItem("Bean", "/ui/csv/bean"));
+        clientSideValidationMenuItems.add(new MenuItem("Complex", "/ui/csv/complex"));
         clientSideValidationMenuItems.add(new MenuItem("Custom", "/ui/csv/custom"));
         clientSideValidationMenuItems.add(new MenuItem("Event", "/ui/csv/event"));
         clientSideValidationMenuItems.add(new MenuItem("Immediate", "/ui/csv/immediate"));

diff --git a/src/main/java/org/primefaces/showcase/view/csv/ComplexValidationView.java b/src/main/java/org/primefaces/showcase/view/csv/ComplexValidationView.java
@@ -24,6 +24,8 @@
 package org.primefaces.showcase.view.csv;
 
 import jakarta.enterprise.context.RequestScoped;
+import jakarta.faces.application.FacesMessage;
+import jakarta.faces.context.FacesContext;
 import jakarta.inject.Named;
 
 import io.quarkus.runtime.annotations.RegisterForReflection;
@@ -62,4 +64,19 @@ public boolean isAcceptTermnsAndCondition() {
     public void setAcceptTermnsAndCondition(boolean acceptTermnsAndCondition) {
         this.acceptTermnsAndCondition = acceptTermnsAndCondition;
     }
+
+    public void doAjax() {
+        FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Ajax-action", "Hello from the server side!");
+        FacesContext.getCurrentInstance().addMessage(null, msg);
+    }
+
+    public void doNonAjax() {
+        FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Non-Ajax-action", "Hello from the server side!");
+        FacesContext.getCurrentInstance().addMessage(null, msg);
+    }
+
+    public void doNonAjaxWithoutCsv() {
+        FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Non-Ajax-action", "Hello from the server side, we skipped the CSV!");
+        FacesContext.getCurrentInstance().addMessage(null, msg);
+    }
 }
diff --git a/src/main/resources/META-INF/resources/ui/csv/complex.xhtml b/src/main/resources/META-INF/resources/ui/csv/complex.xhtml
@@ -1,7 +1,6 @@
 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="jakarta.faces.facelets"
                 xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
                 xmlns:p="primefaces"
                 xmlns:pt="jakarta.faces.passthrough"
                 template="/template/template.xhtml">
@@ -12,18 +11,17 @@
             PrimeFaces.validator['MyComplexValidator'] = {
 
                 validate: function (element) {
-                    var nameRequired = element.find('#form\\:nameRequired');
-                    var name = element.find('#form\\:name');
+                    let nameRequiredPf = PF('nameRequired');
+                    let namePf = PF('name');
 
-                    if (nameRequired.find('.ui-chkbox-icon').hasClass('ui-icon-check') && name.val().length === 0) {
-                        PrimeFaces.validator.Highlighter.types['default'].highlight(name);
-
-                        throw {
+                    if (nameRequiredPf.isChecked() && namePf.getValue().length === 0) {
+                        PrimeFaces.validation.ValidationContext.highlight(namePf);
+                        PrimeFaces.validation.ValidationContext.addMessage(namePf, {
                             summary: 'Validation Error',
                             detail: 'A name is required!'
-                        };
+                        });
                     } else {
-                        PrimeFaces.validator.Highlighter.types['default'].unhighlight(name);
+                        PrimeFaces.validation.ValidationContext.unhighlight(namePf);
                     }
                 }
             };
@@ -46,18 +44,19 @@
     <ui:define name="implementation">
         <div class="card">
             <h:form id="form">
-                <p:panel header="Validate" pt:data-p-val="MyComplexValidator">
+                <p:outputPanel pt:data-p-val="MyComplexValidator">
                     <p:messages showDetail="true">
                         <p:autoUpdate/>
                     </p:messages>
 
                     <h:panelGrid id="grid" columns="3" cellpadding="5">
                         <p:outputLabel for="@next" value="Name required"/>
-                        <p:selectBooleanCheckbox id="nameRequired" value="#{complexValidationView.nameRequired}"/>
+                        <p:selectBooleanCheckbox id="nameRequired" widgetVar="nameRequired"
+                                                 value="#{complexValidationView.nameRequired}"/>
                         <p:message for="@previous"/>
 
                         <p:outputLabel for="@next" value="Name"/>
-                        <p:inputText id="name" value="#{complexValidationView.name}" label="Name"/>
+                        <p:inputText id="name" widgetVar="name" value="#{complexValidationView.name}" label="Name"/>
                         <p:message for="@previous"/>
 
                         <p:outputLabel for="@next" value="Accept Terms And Conditions"/>
@@ -68,13 +67,14 @@
                     <p:defaultCommand target="btnAjax"/>
 
                     <p:commandButton value="Non-Ajax" ajax="false" icon="pi pi-check" validateClient="true"
-                                     style="margin-right:10px"/>
-                    <p:commandButton value="Ajax" id="btnAjax" update="grid" icon="pi pi-check" validateClient="true"
-                                     style="margin-right:10px"/>
-                    <p:commandButton value="Disabled" ajax="false" icon="pi pi-check" style="margin-right:10px"/>
-                </p:panel>
+                                     action="#{complexValidationView.doNonAjax()}" style="margin-right:10px"/>
+                    <p:commandButton value="Ajax" id="btnAjax" update="@form" icon="pi pi-check" validateClient="true"
+                                     action="#{complexValidationView.doAjax()}" style="margin-right:10px"/>
+                    <p:commandButton value="Disabled (without CSV)" ajax="false" icon="pi pi-check"
+                                     action="#{complexValidationView.doNonAjaxWithoutCsv()}" style="margin-right:10px"/>
+                </p:outputPanel>
             </h:form>
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>