[FEATURE] JavaScript validation: Show tab with error on morestep forms

As it was in the good old powermail with jQuery version, we now open the tab with the first input error if JS validation is failing.
To make this happen, I just made the function MoreStepForm.showFieldset public. After that a new default submitErrorCallback definition was added before the existing "scrollToFirstError". Now we simply open the tab with the first input error in the definition "openTabWithError". After that a scrollToFirstError can do the scrolling.

Resolves: #759

Author: einpraegsam

Resources/Private/Build/JavaScript/FormValidation.js

@@ -1,4 +1,5 @@
 import Utility from './Utility';
+import MoreStepForm from './MoreStepForm';
 
 export default class FormValidation {
   #formValidationSelector = '[data-powermail-validate]';
@@ -113,6 +114,15 @@ class Form {
    * @type {{name: function(*=, *): boolean}}
    */
   #submitErrorCallbacks = {
+    'openTabWithError': () => {
+      const firstFieldWithError = this.#form.querySelector('.powermail_field_error');
+      if (firstFieldWithError !== null) {
+        let fieldsetError = firstFieldWithError.closest('.powermail_fieldset');
+        const fieldsetErrorIndex = [...this.#form.querySelectorAll('.powermail_fieldset')].indexOf(fieldsetError);
+        let moreStepForm = new MoreStepForm();
+        moreStepForm.showFieldset(fieldsetErrorIndex, this.#form);
+      }
+    },
     'scrollToFirstError': () => {
       try {
         const fieldsWithError = this.#form.querySelectorAll('.powermail_field_error');

Resources/Private/Build/JavaScript/MoreStepForm.js

@@ -1,3 +1,5 @@
+import Utility from './Utility';
+
 export default function MoreStepForm() {
   'use strict';
 
@@ -7,11 +9,22 @@ export default function MoreStepForm() {
 
   let buttonActiveClass = 'btn-primary';
 
+  let that = this;
+
   this.initialize = function() {
     showListener();
     initializeForms();
   };
 
+  this.showFieldset = function(index, form) {
+    if (form.classList.contains(formClass)) {
+      hideAllFieldsets(form);
+      let fieldsets = getAllFieldsetsOfForm(form);
+      Utility.showElement(fieldsets[index]);
+      updateButtonStatus(form);
+    }
+  };
+
   let initializeForms = function() {
     let moreStepForms = document.querySelectorAll('form.' + formClass);
     for (let i = 0; i < moreStepForms.length; i++) {
@@ -20,7 +33,7 @@ export default function MoreStepForm() {
   };
 
   let initializeForm = function(form) {
-    showFieldset(0, form);
+    that.showFieldset(0, form);
   };
 
   let showListener = function() {
@@ -29,22 +42,15 @@ export default function MoreStepForm() {
       moreButtons[i].addEventListener('click', function(event) {
         let targetFieldset = event.target.getAttribute('data-powermail-morestep-show');
         let form = event.target.closest('form');
-        showFieldset(targetFieldset, form);
+        that.showFieldset(targetFieldset, form);
       });
     }
   }
 
-  let showFieldset = function(index, form) {
-    hideAllFieldsets(form);
-    let fieldsets = getAllFieldsetsOfForm(form);
-    showElement(fieldsets[index]);
-    updateButtonStatus(form);
-  };
-
   let hideAllFieldsets = function(form) {
     let fieldsets = getAllFieldsetsOfForm(form);
     for (let i = 0; i < fieldsets.length; i++) {
-      hideElement(fieldsets[i]);
+      Utility.hideElement(fieldsets[i]);
     }
   };
 
@@ -77,12 +83,4 @@ export default function MoreStepForm() {
   let getAllFieldsetsOfForm = function(form) {
     return form.querySelectorAll('.' + fieldsetClass);
   };
-
-  let hideElement = function(element) {
-    element.style.display = 'none';
-  };
-
-  let showElement = function(element) {
-    element.style.display = 'block';
-  };
 }