[BUGFIX] Hide form validators label when no one is available

With the deprecation removal of regular expressions based EXT:form validators in #101070, the set of available validators for the form element type URL became empty. (See EXT:form/Configuration/Yaml/FormElements/Url.yaml) Instead of only removing the select element from the DOM, the entire form-group is now removed, in order to also hide the corresponding <label> tag, as such a stray label tag isn't helpful for an enduser and is therefore actually even invalid HTML (as the reference to an input element is missing). Resolves: #101749 Related: #101070 Releases: main, 12.4, 11.5 Change-Id: Ib0d34e94e2c3ba109133dac64374f04f7c91329b Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80734 Tested-by: core-ci <typo3@b13.com> Tested-by: Benjamin Franzke <ben@bnf.dev> Reviewed-by: Benjamin Franzke <ben@bnf.dev>
TYPO3 · Sep 7, 2023 · ee1461e · ee1461e
1 parent bd308eb
commit ee1461e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/.../sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html b/.../sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html
@@ -1,13 +1,14 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
-    <div class="t3-form-control-group form-group">
+    <div class="t3-form-control-group form-group" data-template-property="select-group">
         <label data-random-id data-random-id-attribute="for" data-random-id-number="1">
             <span data-template-property="label"></span>
         </label>
         <div id="t3-form-add-finisher" class="t3-form-add-collection-element">
             <select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-select"></select>
         </div>
     </div>
+    <div class="t3-form-control-group form-group fw-bold" style="margin-bottom: 2.25em" data-template-property="label-no-select"></div>
 </div>
 <div id="t3-form-inspector-finishers" class="t3-form-collection-container" data-identifier="inspectorFinishers">
 </div>

diff --git a/...sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html b/...sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html
@@ -1,13 +1,14 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
-    <div class="t3-form-control-group form-group">
+    <div class="t3-form-control-group form-group" data-template-property="select-group">
         <label data-random-id data-random-id-attribute="for" data-random-id-number="1">
             <span data-template-property="label"></span>
         </label>
         <div id="t3-form-add-validator" class="t3-form-add-collection-element" data-template-property="selectOptionsContainer">
             <select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-select"></select>
         </div>
     </div>
+    <div class="t3-form-control-group form-group fw-bold" style="margin-bottom: 2.25em" data-template-property="label-no-select"></div>
 </div>
 <div id="t3-form-inspector-validators" class="t3-form-collection-container" data-identifier="inspectorValidators">
 </div>

diff --git a/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js b/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js
@@ -1009,7 +1009,7 @@ define(['jquery',
      */
     function renderCollectionElementSelectionEditor(collectionName, editorConfiguration, editorHtml) {
       var alreadySelectedCollectionElements, selectElement, collectionContainer,
-        removeSelectElement;
+        removeSelectElement, hasAlreadySelectedCollectionElements;
       assert(
         getUtility().isNonEmptyString(collectionName),
         'Invalid configuration "collectionName"',
@@ -1049,7 +1049,12 @@ define(['jquery',
       getHelper().getTemplatePropertyDomElement('label', editorHtml).text(editorConfiguration['label']);
       selectElement = getHelper().getTemplatePropertyDomElement('selectOptions', editorHtml);
 
-      if (!getUtility().isUndefinedOrNull(alreadySelectedCollectionElements)) {
+      hasAlreadySelectedCollectionElements = (
+        !getUtility().isUndefinedOrNull(alreadySelectedCollectionElements) &&
+        alreadySelectedCollectionElements.length > 0
+      );
+
+      if (hasAlreadySelectedCollectionElements) {
         for (var i = 0, len = alreadySelectedCollectionElements.length; i < len; ++i) {
           getPublisherSubscriber().publish('view/inspector/collectionElement/existing/selected', [
             alreadySelectedCollectionElements[i]['identifier'],
@@ -1081,9 +1086,18 @@ define(['jquery',
       }
 
       if (removeSelectElement) {
-        selectElement.off().empty().remove();
+        getHelper().getTemplatePropertyDomElement('select-group', editorHtml).off().empty().remove();
+        var labelNoSelect = getHelper().getTemplatePropertyDomElement('label-no-select', editorHtml);
+        if (hasAlreadySelectedCollectionElements) {
+          labelNoSelect.text(editorConfiguration.label);
+        } else {
+          labelNoSelect.remove();
+        }
+        return;
       }
 
+      getHelper().getTemplatePropertyDomElement('label-no-select', editorHtml).remove();
+
       selectElement.on('change', function() {
         if ($(this).val() !== '') {
           var value = $(this).val();