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 @@
- + - +
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}

- +