From c2d78c5ca8a97dfd8c39ea006a9f4aa4893b4435 Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Tue, 14 Nov 2023 16:18:41 +0100 Subject: [PATCH 1/8] Add a public formValidation validateVisibleFields() method * to validate those fields in multistepform for example --- .../Private/Build/JavaScript/FormValidation.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/Resources/Private/Build/JavaScript/FormValidation.js b/Resources/Private/Build/JavaScript/FormValidation.js index 457dec277..77776d26a 100644 --- a/Resources/Private/Build/JavaScript/FormValidation.js +++ b/Resources/Private/Build/JavaScript/FormValidation.js @@ -149,6 +149,17 @@ class Form { this.#validateFieldListener(); } + validateVisibleFields() { + const that = this; + let fields = that.#getFieldsFromForm(); + 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 +168,12 @@ class Form { this.#validators[name] = validator; } + scrollToFirstError() { + if (this.#hasFormErrors()) { + this.#submitErrorCallbacks['scrollToFirstError'](); + } + } + /** * @param name * @param callback From e06d5d7d0278924abedbb32d63c376ec14408ff1 Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Tue, 14 Nov 2023 16:21:41 +0100 Subject: [PATCH 2/8] Validate visible fields before proceed on morestep button click * if the data-powermail-morestep-validate attribute is set to "true" on morestep button (new option) * we validate the visible fields and scroll to the first error in error case --- Resources/Private/Build/JavaScript/MoreStepForm.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/Resources/Private/Build/JavaScript/MoreStepForm.js b/Resources/Private/Build/JavaScript/MoreStepForm.js index cdee80b90..791605f29 100644 --- a/Resources/Private/Build/JavaScript/MoreStepForm.js +++ b/Resources/Private/Build/JavaScript/MoreStepForm.js @@ -50,6 +50,19 @@ export default function MoreStepForm() { let targetFieldset = event.target.getAttribute('data-powermail-morestep-show'); const backwards = event.target.getAttribute('data-powermail-morestep-previous') !== null; let form = event.target.closest('form'); + + // CUSTOM visible field validation + let validateVisibleFields = event.target.getAttribute('data-powermail-morestep-validate') === 'true'; + // 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, backwards); }); } From 9e8b4633aed2dad37b3fa4d918c5722a5d0e44e0 Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Tue, 14 Nov 2023 16:25:43 +0100 Subject: [PATCH 3/8] Scroll into view if the next fieldset is shown * without it's problamtic if the fieldsets differ in height * if true, the user has to scroll manually to input the new fieldset --- Resources/Private/Build/JavaScript/MoreStepForm.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Resources/Private/Build/JavaScript/MoreStepForm.js b/Resources/Private/Build/JavaScript/MoreStepForm.js index 791605f29..b35de3369 100644 --- a/Resources/Private/Build/JavaScript/MoreStepForm.js +++ b/Resources/Private/Build/JavaScript/MoreStepForm.js @@ -64,6 +64,7 @@ export default function MoreStepForm() { } that.showFieldset(targetFieldset, form, backwards); + getAllFieldsetsOfForm(form)[targetFieldset]?.scrollIntoView({behavior: 'smooth'}); }); } } From a81890b78a8003c78005f9a20d3919df00e6b6d9 Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Wed, 8 Oct 2025 13:24:37 +0200 Subject: [PATCH 4/8] Improve scrollIntoView behavior * part of https://github.com/in2code-de/powermail/pull/1090/commits/162c61fc97905efa9bac31508b8401af5e6ffefd --- Resources/Private/Build/JavaScript/MoreStepForm.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Resources/Private/Build/JavaScript/MoreStepForm.js b/Resources/Private/Build/JavaScript/MoreStepForm.js index b35de3369..c4f7d6e56 100644 --- a/Resources/Private/Build/JavaScript/MoreStepForm.js +++ b/Resources/Private/Build/JavaScript/MoreStepForm.js @@ -53,6 +53,7 @@ export default function MoreStepForm() { // CUSTOM visible field validation let validateVisibleFields = event.target.getAttribute('data-powermail-morestep-validate') === 'true'; + let scrollIntoView = ['true', '1'].includes(event.target.getAttribute('data-powermail-morestep-scroll')); // validate visible fields if set before proceed if (validateVisibleFields && !form.powermailFormValidation.validateVisibleFields() @@ -64,7 +65,9 @@ export default function MoreStepForm() { } that.showFieldset(targetFieldset, form, backwards); - getAllFieldsetsOfForm(form)[targetFieldset]?.scrollIntoView({behavior: 'smooth'}); + if (scrollIntoView) { + getAllFieldsetsOfForm(form)[targetFieldset]?.scrollIntoView({behavior:'smooth'}); + } }); } } From 6a7da919bfcbda87ba8416559df33c4616b8dd95 Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Wed, 8 Oct 2025 13:25:28 +0200 Subject: [PATCH 5/8] Reset previous errors before validate visible fields * picked https://github.com/in2code-de/powermail/pull/1090/commits/342a5628882a8e0e11ef45d8a71bdbdebb5b313c --- Resources/Private/Build/JavaScript/FormValidation.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Resources/Private/Build/JavaScript/FormValidation.js b/Resources/Private/Build/JavaScript/FormValidation.js index 77776d26a..ccc5bea19 100644 --- a/Resources/Private/Build/JavaScript/FormValidation.js +++ b/Resources/Private/Build/JavaScript/FormValidation.js @@ -152,6 +152,13 @@ class Form { 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]); From 68a2c12d64a74940db6c87f058877f8921fae619 Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Wed, 8 Oct 2025 14:15:36 +0200 Subject: [PATCH 6/8] Do not interrupt smooth scrolling on focus --- Resources/Private/Build/JavaScript/FormValidation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Resources/Private/Build/JavaScript/FormValidation.js b/Resources/Private/Build/JavaScript/FormValidation.js index ccc5bea19..65e91d87d 100644 --- a/Resources/Private/Build/JavaScript/FormValidation.js +++ b/Resources/Private/Build/JavaScript/FormValidation.js @@ -129,7 +129,7 @@ class Form { fieldsWithError.forEach((field) => { if (Utility.isElementVisible(field)) { field.scrollIntoView({behavior:'smooth', block:'center'}); - field.focus({preventScroll:true}); + setTimeout(() => field.focus({ preventScroll: true }), 300); throw 'StopException'; } }); From 3a6b90a0aaad3520495e890ba340ca2147e12c10 Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Wed, 8 Oct 2025 14:16:16 +0200 Subject: [PATCH 7/8] Allow "1" as valid morestep validation value --- Resources/Private/Build/JavaScript/MoreStepForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Resources/Private/Build/JavaScript/MoreStepForm.js b/Resources/Private/Build/JavaScript/MoreStepForm.js index c4f7d6e56..81db558fb 100644 --- a/Resources/Private/Build/JavaScript/MoreStepForm.js +++ b/Resources/Private/Build/JavaScript/MoreStepForm.js @@ -52,7 +52,7 @@ export default function MoreStepForm() { let form = event.target.closest('form'); // CUSTOM visible field validation - let validateVisibleFields = event.target.getAttribute('data-powermail-morestep-validate') === 'true'; + let validateVisibleFields = ['true', '1'].includes(event.target.getAttribute('data-powermail-morestep-validate')); let scrollIntoView = ['true', '1'].includes(event.target.getAttribute('data-powermail-morestep-scroll')); // validate visible fields if set before proceed if (validateVisibleFields From 600d04c582c87efe2fdcba81081159c901f511ca Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Tue, 3 Feb 2026 16:11:43 +0100 Subject: [PATCH 8/8] Add morestep fieldset configuration --- .../TypoScript/Main/Configuration/10_Validation.typoscript | 5 +++++ Configuration/TypoScript/Main/constants.typoscript | 5 +++++ Resources/Private/Partials/Form/Page.html | 2 +- Resources/Private/Templates/Form/Form.html | 2 +- 4 files changed, 12 insertions(+), 2 deletions(-) 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 e745da81a..b06e05396 100644 --- a/Configuration/TypoScript/Main/constants.typoscript +++ b/Configuration/TypoScript/Main/constants.typoscript @@ -38,6 +38,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/Partials/Form/Page.html b/Resources/Private/Partials/Form/Page.html index 927998cf5..0a647d8c0 100644 --- a/Resources/Private/Partials/Form/Page.html +++ b/Resources/Private/Partials/Form/Page.html @@ -16,7 +16,7 @@ - + diff --git a/Resources/Private/Templates/Form/Form.html b/Resources/Private/Templates/Form/Form.html index f7e259a50..213faac83 100644 --- a/Resources/Private/Templates/Form/Form.html +++ b/Resources/Private/Templates/Form/Form.html @@ -33,7 +33,7 @@

{form.title}

- +