Skip to content

[FEATURE] Add morestep fieldset validation - TYPO3 v13 #1339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
denislorch wants to merge 9 commits into
base: master
Choose a base branch
from
Open

[FEATURE] Add morestep fieldset validation - TYPO3 v13 #1339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c2d78c5
Add a public formValidation validateVisibleFields() method
denislorch Nov 14, 2023
e06d5d7
Validate visible fields before proceed on morestep button click
denislorch Nov 14, 2023
9e8b463
Scroll into view if the next fieldset is shown
denislorch Nov 14, 2023
a81890b
Improve scrollIntoView behavior
denislorch Oct 8, 2025
6a7da91
Reset previous errors before validate visible fields
denislorch Oct 8, 2025
68a2c12
Do not interrupt smooth scrolling on focus
denislorch Oct 8, 2025
3a6b90a
Allow "1" as valid morestep validation value
denislorch Oct 8, 2025
5960001
Merge branch 'master' into feature/visible-field-validation-13
denislorch Feb 3, 2026
600d04c
Add morestep fieldset configuration
denislorch Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions Configuration/TypoScript/Main/Configuration/10_Validation.typoscript
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 5 additions & 0 deletions Configuration/TypoScript/Main/constants.typoscript
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
26 changes: 25 additions & 1 deletion Resources/Private/Build/JavaScript/FormValidation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
});
Expand All @@ -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
Expand All @@ -157,6 +175,12 @@ class Form {
this.#validators[name] = validator;
}

scrollToFirstError() {
if (this.#hasFormErrors()) {
this.#submitErrorCallbacks['scrollToFirstError']();
}
}

/**
* @param name
* @param callback
Expand Down
17 changes: 17 additions & 0 deletions Resources/Private/Build/JavaScript/MoreStepForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,24 @@ 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 = ['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
&& !form.powermailFormValidation.validateVisibleFields()
) {
this.form.powermailFormValidation.scrollToFirstError();
event.target.blur();
event.preventDefault();
return;
}

that.showFieldset(targetFieldset, form, backwards);
if (scrollIntoView) {
getAllFieldsetsOfForm(form)[targetFieldset]?.scrollIntoView({behavior:'smooth'});
}
});
}
}
Expand Down
2 changes: 1 addition & 1 deletion Resources/Private/Partials/Form/Page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<button type="button" class="btn btn-secondary" data-powermail-morestep-show="{iterationPages.index - 1}">&lt;</button>
</f:if>
<f:if condition="!{iterationPages.isLast}">
<button type="button" class="btn btn-primary" data-powermail-morestep-show="{iterationPages.cycle}" data-powermail-morestep-previous>&gt;</button>
<button type="button" class="btn btn-primary" data-powermail-morestep-validate="{settings.validation.morestep.fieldset}" data-powermail-morestep-show="{iterationPages.cycle}" data-powermail-morestep-previous>&gt;</button>
</f:if>
</div>
</f:if>
Expand Down
2 changes: 1 addition & 1 deletion Resources/Private/Templates/Form/Form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h3>{form.title}</h3>
<f:if condition="{settings.main.moresteps}">
<div class="btn-group powermail_multistep_navigation" role="group" aria-label="Multistep form page">
<f:for each="{form.pages}" as="page" iteration="iterationPages">
<button class="btn btn-secondary{f:if(condition:iterationPages.isFirst,then:' active')}" type="button" data-powermail-fieldset="{page.uid}" data-powermail-morestep-current="{iterationPages.index}" data-powermail-morestep-show="{iterationPages.index}">{page.title}</button>
<button class="btn btn-secondary{f:if(condition:iterationPages.isFirst,then:' active')}" type="button" data-powermail-morestep-validate="{settings.validation.morestep.fieldset}" data-powermail-fieldset="{page.uid}" data-powermail-morestep-current="{iterationPages.index}" data-powermail-morestep-show="{iterationPages.index}">{page.title}</button>
</f:for>
</div>
</f:if>
Expand Down