[FEATURE] Extend form validation with error callback functionality

If you want to hook into the process when a user submits a form and the validation fails, you can now hook into it from outside like:

const forms = document.querySelectorAll('.powermail_form');
forms.forEach(function(form) {
    let formValidation = form.powermailFormValidation;

    formValidation.addValidator('custom100', function(field) {
        if (field.hasAttribute('data-powermail-custom100')) {
            // return true means validation has failed
            return field.value < parseInt(field.getAttribute('data-powermail-custom100'));
        }
        return false;
    });
});

Author: einpraegsam

Resources/Private/Build/JavaScript/FormValidation.js

@@ -40,17 +40,9 @@ class Form {
   #errorContainerClass = 'data-powermail-class-handler';
   #errorMessageContainerClass = 'powermail-errors-list';
 
-  constructor(form) {
-    this.#form = form;
-    this.#form.powermailFormValidation = this;
-  }
-
-  validate() {
-    this.#validateFormSubmit();
-    this.#validateFieldListener();
-  }
-
   /**
+   * Validator configuration
+   *
    * Add possibility to add own validators from outside like:
    *
    *    const forms = document.querySelectorAll('.powermail_form');
@@ -66,19 +58,95 @@ class Form {
    *      });
    *    });
    *
+   * @type {{name: function(*=, *): boolean}}
+   */
+  #validators = {
+    'required': (field) => {
+      return this.#isRequiredField(field) && this.#isValidationRequiredConfirmed(field) === false;
+    },
+    'email': (field) => {
+      return this.#isEmailField(field) && this.#isValidationEmailConfirmed(field) === false;
+    },
+    'url': (field) => {
+      return this.#isUrlField(field) && this.#isValidationUrlConfirmed(field) === false;
+    },
+    'pattern': (field) => {
+      return this.#isPatternField(field) && this.#isValidationPatternConfirmed(field) === false;
+    },
+    'number': (field) => {
+      return this.#isNumberField(field) && this.#isValidationNumberConfirmed(field) === false;
+    },
+    'minimum': (field) => {
+      return this.#isMinimumField(field) && this.#isValidationMinimumConfirmed(field) === false;
+    },
+    'maximum': (field) => {
+      return this.#isMaximumField(field) && this.#isValidationMaximumConfirmed(field) === false;
+    },
+    'length': (field) => {
+      return this.#isLengthField(field) && this.#isValidationLengthConfirmed(field) === false;
+    },
+    'equalto': (field) => {
+      return this.#isEqualtoField(field) && this.#isValidationEqualtoConfirmed(field) === false;
+    },
+    'powermailfilesize': (field) => {
+      return this.#isUploadField(field) && this.#isValidationUploadFieldSizeConfirmed(field) === false;
+    },
+    'powermailfileextensions': (field) => {
+      return this.#isUploadField(field) && this.#isValidationUploadFieldExtensionConfirmed(field) === false;
+    },
+  };
+
+  /**
+   * Submit error callback configuration
+   *
+   * Add possibility to add own callbacks when a user submits a form and an error happens from outside like:
+   *
+   *    const forms = document.querySelectorAll('.powermail_form');
+   *    forms.forEach(function(form) {
+   *      let formValidation = form.powermailFormValidation;
+   *
+   *      formValidation.addSubmitErrorCallback('custom100', function() {
+   *        // error happens, do something
+   *      });
+   *    });
+   *
+   * @type {{name: function(*=, *): boolean}}
+   */
+  #submitErrorCallbacks = {};
+
+  constructor(form) {
+    this.#form = form;
+    this.#form.powermailFormValidation = this;
+  }
+
+  validate() {
+    this.#validateFormSubmit();
+    this.#validateFieldListener();
+  }
+
+  /**
    * @param name
    * @param validator
    */
   addValidator(name, validator) {
     this.#validators[name] = validator;
   }
 
+  /**
+   * @param name
+   * @param callback
+   */
+  addSubmitErrorCallback(name, callback) {
+    this.#submitErrorCallbacks[name] = callback;
+  }
+
   #validateFormSubmit() {
     const that = this;
     this.#form.setAttribute('novalidate', 'novalidate')
     this.#form.addEventListener('submit', function(event) {
       that.#validateForm();
       if (that.#hasFormErrors() === true) {
+        that.#runSubmitErrorCallbacks();
         event.preventDefault();
       }
     })
@@ -109,47 +177,6 @@ class Form {
     }
   };
 
-  /**
-   * Validator configuration
-   *
-   * @type {{name: function(*=, *): boolean}}
-   */
-  #validators = {
-    'required': (field) => {
-      return this.#isRequiredField(field) && this.#isValidationRequiredConfirmed(field) === false;
-    },
-    'email': (field) => {
-      return this.#isEmailField(field) && this.#isValidationEmailConfirmed(field) === false;
-    },
-    'url': (field) => {
-      return this.#isUrlField(field) && this.#isValidationUrlConfirmed(field) === false;
-    },
-    'pattern': (field) => {
-      return this.#isPatternField(field) && this.#isValidationPatternConfirmed(field) === false;
-    },
-    'number': (field) => {
-      return this.#isNumberField(field) && this.#isValidationNumberConfirmed(field) === false;
-    },
-    'minimum': (field) => {
-      return this.#isMinimumField(field) && this.#isValidationMinimumConfirmed(field) === false;
-    },
-    'maximum': (field) => {
-      return this.#isMaximumField(field) && this.#isValidationMaximumConfirmed(field) === false;
-    },
-    'length': (field) => {
-      return this.#isLengthField(field) && this.#isValidationLengthConfirmed(field) === false;
-    },
-    'equalto': (field) => {
-      return this.#isEqualtoField(field) && this.#isValidationEqualtoConfirmed(field) === false;
-    },
-    'powermailfilesize': (field) => {
-      return this.#isUploadField(field) && this.#isValidationUploadFieldSizeConfirmed(field) === false;
-    },
-    'powermailfileextensions': (field) => {
-      return this.#isUploadField(field) && this.#isValidationUploadFieldExtensionConfirmed(field) === false;
-    },
-  };
-
   #validateField(field) {
     let error = false;
     field = this.#getValidationField(field);
@@ -175,6 +202,15 @@ class Form {
     return error;
   }
 
+  #runSubmitErrorCallbacks() {
+    for (let callback in this.#submitErrorCallbacks) {
+      if (this.#submitErrorCallbacks.hasOwnProperty(callback) === false) {
+        continue;
+      }
+      this.#submitErrorCallbacks[callback]();
+    }
+  }
+
   /*
    * Check for validations
    */