From f690df7b53b8ec3e8d9cc6c0306cebff02d27b07 Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Tue, 14 Nov 2023 16:18:41 +0100 Subject: [PATCH 1/6] 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 fc99a5ca5..8d01a43fa 100644 --- a/Resources/Private/Build/JavaScript/FormValidation.js +++ b/Resources/Private/Build/JavaScript/FormValidation.js @@ -148,6 +148,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 @@ -156,6 +167,12 @@ class Form { this.#validators[name] = validator; } + scrollToFirstError() { + if (this.#hasFormErrors()) { + this.#submitErrorCallbacks['scrollToFirstError'](); + } + } + /** * @param name * @param callback From ed174a931b4c3ff00f8b969f285d330f808e5cda Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Tue, 14 Nov 2023 16:21:41 +0100 Subject: [PATCH 2/6] 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 | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/Resources/Private/Build/JavaScript/MoreStepForm.js b/Resources/Private/Build/JavaScript/MoreStepForm.js index 1d08f6ffc..91dfa4d28 100644 --- a/Resources/Private/Build/JavaScript/MoreStepForm.js +++ b/Resources/Private/Build/JavaScript/MoreStepForm.js @@ -41,7 +41,19 @@ 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 = event.target.getAttribute('data-powermail-morestep-validate') === 'true'; 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); }); } From e379ca223dcd6896c6feb4f5cfe1e16f9cfc6deb Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Tue, 14 Nov 2023 16:25:43 +0100 Subject: [PATCH 3/6] 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 91dfa4d28..9e34f4728 100644 --- a/Resources/Private/Build/JavaScript/MoreStepForm.js +++ b/Resources/Private/Build/JavaScript/MoreStepForm.js @@ -55,6 +55,7 @@ export default function MoreStepForm() { } that.showFieldset(targetFieldset, form); + getAllFieldsetsOfForm(form)[targetFieldset]?.scrollIntoView({behavior: 'smooth'}); }); } } From 1a42eb490e592339e6f33621b330fcc10081833f Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Tue, 14 Nov 2023 17:17:50 +0100 Subject: [PATCH 4/6] Add new validation.morestep.fieldset setting for simple control --- .../TypoScript/Main/Configuration/10_Validation.typoscript | 5 +++++ Configuration/TypoScript/Main/constants.typoscript | 5 +++++ Resources/Private/Build/JavaScript/MoreStepForm.js | 4 ++-- Resources/Private/Partials/Form/Page.html | 2 +- Resources/Private/Templates/Form/Form.html | 2 +- 5 files changed, 14 insertions(+), 4 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 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/MoreStepForm.js b/Resources/Private/Build/JavaScript/MoreStepForm.js index 9e34f4728..0a80a5db2 100644 --- a/Resources/Private/Build/JavaScript/MoreStepForm.js +++ b/Resources/Private/Build/JavaScript/MoreStepForm.js @@ -41,7 +41,7 @@ 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 = event.target.getAttribute('data-powermail-morestep-validate') === 'true'; + let validateVisibleFields = ['true', '1'].includes(event.target.getAttribute('data-powermail-morestep-validate')); let form = event.target.closest('form'); // validate visible fields if set before proceed @@ -55,7 +55,7 @@ export default function MoreStepForm() { } that.showFieldset(targetFieldset, form); - getAllFieldsetsOfForm(form)[targetFieldset]?.scrollIntoView({behavior: 'smooth'}); + getAllFieldsetsOfForm(form)[targetFieldset]?.scrollIntoView({behavior:'smooth'}); }); } } diff --git a/Resources/Private/Partials/Form/Page.html b/Resources/Private/Partials/Form/Page.html index 5a8b30e6b..584280452 100644 --- a/Resources/Private/Partials/Form/Page.html +++ b/Resources/Private/Partials/Form/Page.html @@ -13,7 +13,7 @@
- + diff --git a/Resources/Private/Templates/Form/Form.html b/Resources/Private/Templates/Form/Form.html index 67b969ab1..ac5056953 100644 --- a/Resources/Private/Templates/Form/Form.html +++ b/Resources/Private/Templates/Form/Form.html @@ -32,7 +32,7 @@

{form.title}

- +
From 162c61fc97905efa9bac31508b8401af5e6ffefd Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Tue, 14 Nov 2023 17:31:30 +0100 Subject: [PATCH 5/6] Improve scrollIntoView behavior * scroll on navigation click, not on btn-group link above --- Resources/Private/Build/JavaScript/MoreStepForm.js | 5 ++++- Resources/Private/Partials/Form/Page.html | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/Resources/Private/Build/JavaScript/MoreStepForm.js b/Resources/Private/Build/JavaScript/MoreStepForm.js index 0a80a5db2..d6839ea0f 100644 --- a/Resources/Private/Build/JavaScript/MoreStepForm.js +++ b/Resources/Private/Build/JavaScript/MoreStepForm.js @@ -42,6 +42,7 @@ export default function MoreStepForm() { 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 @@ -55,7 +56,9 @@ export default function MoreStepForm() { } that.showFieldset(targetFieldset, form); - getAllFieldsetsOfForm(form)[targetFieldset]?.scrollIntoView({behavior:'smooth'}); + 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 584280452..dcf91523a 100644 --- a/Resources/Private/Partials/Form/Page.html +++ b/Resources/Private/Partials/Form/Page.html @@ -13,10 +13,10 @@
- + - +
From 342a5628882a8e0e11ef45d8a71bdbdebb5b313c Mon Sep 17 00:00:00 2001 From: Denis Lorch Date: Tue, 14 Nov 2023 18:48:44 +0100 Subject: [PATCH 6/6] Reset previous errors before validate visible fields --- 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 8d01a43fa..1424e7a8e 100644 --- a/Resources/Private/Build/JavaScript/FormValidation.js +++ b/Resources/Private/Build/JavaScript/FormValidation.js @@ -151,6 +151,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]);