NEW Show icons on tabs with invalid form field values

silverstripe · Sep 17, 2020 · 645873e · 645873e
1 parent f88e70c
commit 645873e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 21 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/legacy/LeftAndMain.EditForm.js b/client/src/legacy/LeftAndMain.EditForm.js
@@ -110,27 +110,46 @@ $.entwine('ss', function($){
     },
     'from .cms-tabset': {
       onafterredrawtabs: function () {
-        // Show validation errors if necessary
-        if(this.hasClass('validationerror')) {
-          // Ensure the first validation error is visible
-          var tabError = this.find('.message.validation, .message.required').first().closest('.tab');
-          $('.cms-container').clearCurrentTabState(); // clear state to avoid override later on
-
-          // Attempt #1: Look for nearest .ss-tabset (usually nested deeper underneath a .cms-tabset).
-          var $tabSet = tabError.closest('.ss-tabset');
-
-          // Attempt #2: Next level in tab-ception, try to select the tab within this higher level .cms-tabset if possible
-          if (!$tabSet.length) {
-            $tabSet = tabError.closest('.cms-tabset');
-          }
 
-          if ($tabSet.length) {
-            $tabSet.tabs('option', 'active', tabError.index('.tab'));
-          } else if (!this.getValidationErrorShown()) {
-            // Ensure that this error message popup won't be added more than once
-            this.setValidationErrorShown(true);
-            errorMessage(ss.i18n._t('Admin.VALIDATIONERROR', 'Validation Error'));
-          }
+        // Add an invalid icon on each tab that contains form fields than failed validation
+
+        const iconClass = 'invalid-tab-icon';
+
+        // Remove any existing invalid tab icons
+        this.find(`.${iconClass}`).remove();
+
+        if(!this.hasClass('validationerror')) {
+          return;
+        }
+
+        // Clear state to avoid override later on
+        $('.cms-container').clearCurrentTabState();
+
+        // Find tab-pane's with decedent validation .alert's
+        const $invalidTabPanes = this.find('.tab-pane .alert').closest('.tab-pane');
+        if (!$invalidTabPanes.length) {
+          return;
+        }
+
+        // Get the surrounding ss-tabset
+        const $ssTabSet = $invalidTabPanes.closest('.tab-content').closest('.ss-tabset');
+
+        // Add invalid icons to tabs
+        if ($ssTabSet.length) {
+          $invalidTabPanes.each((i) => {
+            const invalidTabPaneId = $invalidTabPanes.eq(i).attr('id');
+            const $tabLi = $ssTabSet.find(`#tab-${invalidTabPaneId}`).closest('li');
+            const $icon = $(`<i class="${iconClass}">@</i>`);
+            $tabLi.append($icon);
+          });
+          return;
+        }
+
+        // Legacy fallback behaviour
+        if (!this.getValidationErrorShown()) {
+          errorMessage(ss.i18n._t('Admin.VALIDATIONERROR', 'Validation Error'));
+          // Ensure that this error message popup won't be added more than once
+          this.setValidationErrorShown(true);
         }
       }
     },