[FEATURE] Add morestep fieldset validation

Configuration/TypoScript/Main/Configuration/10_Validation.typoscript

@@ -9,6 +9,11 @@ plugin.tx_powermail.settings.setup {
     # enable serverside validation
     server = {$plugin.tx_powermail.settings.validation.server}
 
+    morestep {
+      # enable clientside fieldset validation for morestep forms on step change
+      fieldset = {$plugin.tx_powermail.settings.validation.morestep.fieldset}
+    }
+
     unique {
       # EXAMPLE: Enable unique check for {email}
       #email = 1

Configuration/TypoScript/Main/constants.typoscript

@@ -39,6 +39,11 @@ plugin.tx_powermail {
 
       # cat=powermail_additional//0120; type=boolean; label= PHP Server Validation: Validate User Input with PHP on serverside
       server = 1
+
+      morestep {
+        # cat=powermail_additional//0130; type=boolean; label= Validate User Fieldset Input on Multistep Forms with JavaScript on step change
+        fieldset = 0
+      }
     }
 
     receiver {

Resources/Private/Build/JavaScript/FormValidation.js

@@ -149,6 +149,24 @@ class Form {
     this.#validateFieldListener();
   }
 
+  validateVisibleFields() {
+    const that = this;
+    let fields = that.#getFieldsFromForm();
+    // reset errors
+    this.#error = false;
+    for (let i = 0; i < fields.length; i++) {
+      that.#updateErrorClassesForFormAndFieldsets(fields[i]);
+      this.#addFieldErrorStatus(fields[i], false);
+    }
+    // validate
+    for (let i = 0; i < fields.length; i++) {
+      if (Utility.isElementVisible(fields[i])) {
+        that.#validateField(fields[i]);
+      }
+    }
+    return !that.#hasFormErrors();
+  }
+
   /**
    * @param name
    * @param validator
@@ -157,6 +175,12 @@ class Form {
     this.#validators[name] = validator;
   }
 
+  scrollToFirstError() {
+    if (this.#hasFormErrors()) {
+      this.#submitErrorCallbacks['scrollToFirstError']();
+    }
+  }
+
   /**
    * @param name
    * @param callback

Resources/Private/Build/JavaScript/MoreStepForm.js

@@ -41,8 +41,24 @@ export default function MoreStepForm() {
     for (let i = 0; i < moreButtons.length; i++) {
       moreButtons[i].addEventListener('click', function(event) {
         let targetFieldset = event.target.getAttribute('data-powermail-morestep-show');
+        let validateVisibleFields = ['true', '1'].includes(event.target.getAttribute('data-powermail-morestep-validate'));
+        let scrollIntoView = ['true', '1'].includes(event.target.getAttribute('data-powermail-morestep-scroll'));
         let form = event.target.closest('form');
+
+        // validate visible fields if set before proceed
+        if (validateVisibleFields
+            && !form.powermailFormValidation.validateVisibleFields()
+        ) {
+          this.form.powermailFormValidation.scrollToFirstError();
+          event.target.blur();
+          event.preventDefault();
+          return;
+        }
+
         that.showFieldset(targetFieldset, form);
+        if (scrollIntoView) {
+          getAllFieldsetsOfForm(form)[targetFieldset]?.scrollIntoView({behavior:'smooth'});
+        }
       });
     }
   }

Resources/Private/Partials/Form/Page.html

@@ -13,10 +13,10 @@
     <f:if condition="{settings.main.moresteps}">
         <div class="powermail_fieldwrap powermail_tab_navigation">
             <f:if condition="!{iterationPages.isLast}">
-                <button type="button" class="btn btn-primary pull-right" data-powermail-morestep-show="{iterationPages.cycle}">&gt;</button>
+                <button type="button" class="btn btn-primary pull-right" data-powermail-morestep-scroll="true" data-powermail-morestep-validate="{settings.validation.morestep.fieldset}" data-powermail-morestep-show="{iterationPages.cycle}">&gt;</button>
             </f:if>
             <f:if condition="!{iterationPages.isFirst}">
-                <button type="button" class="btn btn-warning" data-powermail-morestep-show="{iterationPages.index - 1}">&lt;</button>
+                <button type="button" class="btn btn-warning" data-powermail-morestep-scroll="true" data-powermail-morestep-show="{iterationPages.index - 1}">&lt;</button>
             </f:if>
         </div>
     </f:if>

Resources/Private/Templates/Form/Form.html

@@ -32,7 +32,7 @@ <h3>{form.title}</h3>
                     <f:if condition="{settings.main.moresteps}">
                         <div class="btn-group">
                             <f:for each="{form.pages}" as="page" iteration="iterationPages">
-                                <button class="btn btn-default{f:if(condition:iterationPages.isFirst,then:' btn-primary')}" type="button" data-powermail-morestep-current="{iterationPages.index}" data-powermail-morestep-show="{iterationPages.index}">{page.title}</button>
+                                <button class="btn btn-default{f:if(condition:iterationPages.isFirst,then:' btn-primary')}" type="button" data-powermail-morestep-validate="{settings.validation.morestep.fieldset}" data-powermail-morestep-current="{iterationPages.index}" data-powermail-morestep-show="{iterationPages.index}">{page.title}</button>
                             </f:for>
                         </div>
                     </f:if>