README

Conditional visibility for TYPO3 form framework elements. Bedingte Sichtbarkeit für Elemente des TYPO3 Form Frameworks.

🌐 English · Deutsch

English

Show or hide a form element – an input field or a static text – depending on the value of another field in the same form. The frontend reacts live while the user fills the form, and the server-side validation is kept consistent.

What it does

For any supported form element you can configure, directly in the backend form editor:

• Steuerfeld (controlling field) – the identifier of the field this element depends on, e.g. singleselect-1.
• Wert (value) – the value that field must equal (==) for this element to be shown.

At runtime:

• Frontend (live): conditional-visibility.js shows/hides the element as the controlling field changes. While hidden, the required attribute is removed so the browser cannot block submission of a hidden field.
• Server-side: an event listener adds a form variant that removes the element's validators whenever the controlling field does not hold the expected value, so a hidden required field can never block form submission.
• No-JS fallback: without JavaScript every element stays visible; its required constraint is only enforced while the condition is met.

How it works

Concern	Implementation
Editor fields	Configuration/Form/FormSetup.yaml (Inspector-TextEditor per element type)
Data attributes in markup	Overridden Field/Field.html, StaticText.html, ContentElement.html
Live show/hide	Resources/Public/JavaScript/conditional-visibility.js
Server-side validation	Classes/EventListener/AddConditionalVisibility.php (Creationx\Cixformconditions; variant on AfterFormDefinitionLoadedEvent)
Editor + FE config + JS registration	ext_localconf.php (module.tx_form + plugin.tx_form + page.includeJSFooter via addTypoScriptSetup, global – no site set / site TypoScript required)

The condition is stored non-destructively as properties.conditionalVisibility on the element; the variant is derived at runtime and never written to the YAML.

Installation / integration

The extension is fully autonomous – it needs no site set and no site TypoScript.

1. composer require creationx/cixformconditions (or add a path repository under extensions/ and require :@dev).
2. Everything is registered globally in ext_localconf.php via addTypoScriptSetup(): the backend editor config (module.tx_form), the frontend config (plugin.tx_form) and the frontend JavaScript (page.includeJSFooter).
3. Flush all caches (the form configuration and TypoScript are cached). The inspector fields and the frontend script only take effect after a cache flush.

Supported element types

Text, Textarea, Email, Telephone, Url, Number, Date, SingleSelect, MultiSelect, RadioButton, Checkbox, MultiCheckbox, StaticText, ContentElement.

Current limitations (MVP)

• Only the == operator (equals). Multiple accepted values can be given as a comma-separated list (equals-any); other operators are a later step.
• The controlling field is entered as an identifier; a dropdown of sibling fields is planned for phase 2.
• Chained conditions (A controls B controls C) are not an explicit target yet.
• Containers (e.g. GridRow) are not handled directly; put the condition on the individual elements inside the row.
• Template overrides target the default version1 frontend template variant.

Requirements

• TYPO3 12.4 LTS or 13.4 LTS
• typo3/cms-form

License

Released under the GPL-2.0-or-later license.

Deutsch

Blende ein Formularelement – ein Eingabefeld oder einen statischen Text – abhängig vom Wert eines anderen Feldes im selben Formular ein oder aus. Das Frontend reagiert live, während der Nutzer das Formular ausfüllt, und die serverseitige Validierung bleibt konsistent.

Was es macht

Für jedes unterstützte Formularelement konfigurierst du direkt im Backend- Formulareditor:

• Steuerfeld – der Identifier des Feldes, von dem dieses Element abhängt, z. B. singleselect-1.
• Wert – der Wert, den das Steuerfeld haben muss (==), damit dieses Element angezeigt wird.

Zur Laufzeit:

• Frontend (live): conditional-visibility.js blendet das Element ein/aus, sobald sich das Steuerfeld ändert. Solange es ausgeblendet ist, wird das required-Attribut entfernt, damit der Browser das Absenden nicht wegen eines versteckten Feldes blockiert.
• Serverseitig: Ein Event-Listener fügt eine Formular-Variante hinzu, die die Validatoren des Elements entfernt, sobald das Steuerfeld nicht den erwarteten Wert hat. So kann ein verstecktes Pflichtfeld das Absenden nie blockieren.
• Fallback ohne JS: Ohne JavaScript bleibt jedes Element sichtbar; die required-Vorgabe greift nur, solange die Bedingung erfüllt ist.

Wie es funktioniert

Bereich	Umsetzung
Editor-Felder	Configuration/Form/FormSetup.yaml (Inspector-TextEditor je Elementtyp)
Data-Attribute im Markup	Überschriebene Field/Field.html, StaticText.html, ContentElement.html
Live Ein-/Ausblenden	Resources/Public/JavaScript/conditional-visibility.js
Serverseitige Validierung	Classes/EventListener/AddConditionalVisibility.php (Creationx\Cixformconditions; Variante über AfterFormDefinitionLoadedEvent)
Editor- + FE-Konfig + JS-Registrierung	ext_localconf.php (module.tx_form + plugin.tx_form + page.includeJSFooter via addTypoScriptSetup, global – kein Site Set / Site-TypoScript nötig)

Die Bedingung wird verlustfrei als properties.conditionalVisibility am Element gespeichert; die Variante wird zur Laufzeit abgeleitet und nie in die YAML geschrieben.

Installation / Einbindung

Die Extension ist vollständig autonom – sie benötigt weder ein Site Set noch Site-TypoScript.

1. composer require creationx/cixformconditions (oder ein Path-Repository unter extensions/ einrichten und :@dev requiren).
2. Alles wird global in ext_localconf.php über addTypoScriptSetup() registriert: die Backend-Editor-Konfiguration (module.tx_form), die Frontend-Konfiguration (plugin.tx_form) und das Frontend-JavaScript (page.includeJSFooter).
3. Alle Caches leeren (Formularkonfiguration und TypoScript werden gecacht). Die Inspector-Felder und das Frontend-Skript greifen erst nach einem Cache-Flush.

Unterstützte Elementtypen

Text, Textarea, Email, Telephone, Url, Number, Date, SingleSelect, MultiSelect, RadioButton, Checkbox, MultiCheckbox, StaticText, ContentElement.

Aktuelle Einschränkungen (MVP)

• Nur der Operator == (gleich). Mehrere zulässige Werte können als kommagetrennte Liste angegeben werden (equals-any); weitere Operatoren folgen später.
• Das Steuerfeld wird als Identifier eingegeben; ein Dropdown der Geschwister- Felder ist für Phase 2 geplant.
• Verkettete Bedingungen (A steuert B steuert C) sind noch kein explizites Ziel.
• Container (z. B. GridRow) werden nicht direkt behandelt; setze die Bedingung an die einzelnen Elemente innerhalb der Zeile.
• Template-Overrides zielen auf die Standard-Frontend-Template-Variante version1.

Voraussetzungen

• TYPO3 12.4 LTS oder 13.4 LTS
• typo3/cms-form

Lizenz

Veröffentlicht unter der Lizenz GPL-2.0-or-later.