diff --git a/Configuration/TypoScript/Main/Configuration/10_Validation.typoscript b/Configuration/TypoScript/Main/Configuration/10_Validation.typoscript
index c15c6a146..4b60242a2 100644
--- a/Configuration/TypoScript/Main/Configuration/10_Validation.typoscript
+++ b/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
diff --git a/Configuration/TypoScript/Main/constants.typoscript b/Configuration/TypoScript/Main/constants.typoscript
index 0947269d9..1c083ddcc 100644
--- a/Configuration/TypoScript/Main/constants.typoscript
+++ b/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 {
diff --git a/Resources/Private/Build/JavaScript/FormValidation.js b/Resources/Private/Build/JavaScript/FormValidation.js
index bc4d4dfce..b593da19b 100644
--- a/Resources/Private/Build/JavaScript/FormValidation.js
+++ b/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
diff --git a/Resources/Private/Build/JavaScript/MoreStepForm.js b/Resources/Private/Build/JavaScript/MoreStepForm.js
index 1d08f6ffc..d6839ea0f 100644
--- a/Resources/Private/Build/JavaScript/MoreStepForm.js
+++ b/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'});
+ }
});
}
}
diff --git a/Resources/Private/Partials/Form/Page.html b/Resources/Private/Partials/Form/Page.html
index 5a8b30e6b..dcf91523a 100644
--- a/Resources/Private/Partials/Form/Page.html
+++ b/Resources/Private/Partials/Form/Page.html
@@ -13,10 +13,10 @@