IBX-9976: Fixed styles for invalid fields labels

albozek · albozek · commit 578ac10ff37a · 2025-07-18T15:15:09.000+02:00
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js b/src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js
@@ -35,20 +35,23 @@
                     eventName: 'change',
                     callback: 'validateInput',
                     errorNodeSelectors: ['.ibexa-form-error'],
+                    invalidStateSelectors: ['.ibexa-field-edit__label'],
                 },
                 {
                     isValueValidator: false,
                     selector: `input[type="file"]`,
                     eventName: 'ibexa-invalid-file-size',
                     callback: 'showFileSizeError',
                     errorNodeSelectors: ['.ibexa-form-error'],
+                    invalidStateSelectors: ['.ibexa-field-edit__label'],
                 },
                 {
                     isValueValidator: false,
                     selector: `input[type="file"]`,
                     eventName: 'ibexa-invalid-file-type',
                     callback: 'showFileTypeError',
                     errorNodeSelectors: ['.ibexa-form-error'],
+                    invalidStateSelectors: ['.ibexa-field-edit__label'],
                 },
             ],
         });
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezboolean.js b/src/bundle/Resources/public/js/scripts/fieldType/ezboolean.js
@@ -1,6 +1,7 @@
 (function (global, doc, ibexa) {
     const SELECTOR_FIELD = '.ibexa-field-edit--ezboolean';
     const SELECTOR_ERROR_NODE = '.ibexa-form-error';
+    const SELECTOR_LABEL = '.ibexa-field-edit__label';
 
     class EzBooleanValidator extends ibexa.BaseFieldValidator {
         /**
@@ -13,7 +14,7 @@
          */
         validateInput(event) {
             const isError = !event.target.checked && event.target.required;
-            const label = event.target.closest(SELECTOR_FIELD).querySelector('.ibexa-field-edit__label').innerHTML;
+            const label = event.target.closest(SELECTOR_FIELD).querySelector(SELECTOR_LABEL).innerText;
             const errorMessage = ibexa.errors.emptyField.replace('{fieldName}', label);
 
             return {
@@ -32,6 +33,7 @@
                 eventName: 'change',
                 callback: 'validateInput',
                 errorNodeSelectors: [SELECTOR_ERROR_NODE],
+                invalidStateSelectors: [SELECTOR_LABEL],
             },
         ],
     });
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezemail.js b/src/bundle/Resources/public/js/scripts/fieldType/ezemail.js
@@ -1,6 +1,7 @@
 (function (global, doc, ibexa) {
     const SELECTOR_FIELD = '.ibexa-field-edit--ezemail';
     const SELECTOR_ERROR_NODE = '.ibexa-form-error';
+    const SELECTOR_LABEL = '.ibexa-field-edit__label';
 
     class EzEmailValidator extends ibexa.BaseFieldValidator {
         /**
@@ -17,7 +18,7 @@
             const isEmpty = !input.value.trim();
             const isValid = ibexa.errors.emailRegexp.test(input.value);
             const isError = (isRequired && isEmpty) || (!isEmpty && !isValid);
-            const label = input.closest(SELECTOR_FIELD).querySelector('.ibexa-field-edit__label').innerHTML;
+            const label = input.closest(SELECTOR_FIELD).querySelector(SELECTOR_LABEL).innerText;
             const result = { isError };
 
             if (isRequired && isEmpty) {
@@ -39,6 +40,7 @@
                 eventName: 'blur',
                 callback: 'validateInput',
                 errorNodeSelectors: [SELECTOR_ERROR_NODE],
+                invalidStateSelectors: [SELECTOR_LABEL],
             },
         ],
     });
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezfloat.js b/src/bundle/Resources/public/js/scripts/fieldType/ezfloat.js
@@ -1,6 +1,7 @@
 (function (global, doc, ibexa) {
     const SELECTOR_FIELD = '.ibexa-field-edit--ezfloat';
     const SELECTOR_ERROR_NODE = `${SELECTOR_FIELD} .ibexa-form-error`;
+    const SELECTOR_LABEL = '.ibexa-field-edit__label';
 
     class EzFloatValidator extends ibexa.BaseFieldValidator {
         /**
@@ -19,7 +20,7 @@
             const isLess = value < parseFloat(event.target.getAttribute('min'));
             const isGreater = value > parseFloat(event.target.getAttribute('max'));
             const isError = (isEmpty && isRequired) || (!isEmpty && (!isFloat || isLess || isGreater));
-            const label = event.target.closest(SELECTOR_FIELD).querySelector('.ibexa-field-edit__label').innerHTML;
+            const label = event.target.closest(SELECTOR_FIELD).querySelector(SELECTOR_LABEL).innerText;
             const result = { isError };
 
             if (isEmpty) {
@@ -49,6 +50,7 @@
                 eventName: 'blur',
                 callback: 'validateFloat',
                 errorNodeSelectors: [SELECTOR_ERROR_NODE],
+                invalidStateSelectors: [SELECTOR_LABEL],
             },
         ],
     });
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js b/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js
@@ -95,7 +95,7 @@
             const alreadyIsError = this.fieldContainer.classList.contains(this.classInvalid);
             const isEmpty = !event.target.value;
             const isError = alreadyIsError || (isEmpty && isRequired && !isFileFieldEmpty);
-            const label = event.target.closest(SELECTOR_ALT_WRAPPER).querySelector('.ibexa-data-source__label').innerHTML;
+            const label = event.target.closest(SELECTOR_ALT_WRAPPER).querySelector('.ibexa-data-source__label').innerText;
             const result = { isError };
 
             if (isEmpty) {
@@ -116,12 +116,13 @@
                     eventName: 'change',
                     callback: 'validateInput',
                     errorNodeSelectors: ['.ibexa-form-error'],
+                    invalidStateSelectors: ['.ibexa-field-edit__label'],
                 },
                 {
                     selector: SELECTOR_INPUT_ALT,
                     eventName: 'blur',
                     callback: 'validateAltInput',
-                    invalidStateSelectors: ['.ibexa-data-source__field--alternativeText'],
+                    invalidStateSelectors: ['.ibexa-data-source__field--alternativeText', '.ibexa-field-edit__label'],
                     errorNodeSelectors: [`${SELECTOR_ALT_WRAPPER} .ibexa-form-error`],
                 },
                 {
@@ -130,20 +131,22 @@
                     eventName: 'ibexa-invalid-file-size',
                     callback: 'showFileSizeError',
                     errorNodeSelectors: ['.ibexa-form-error'],
+                    invalidStateSelectors: ['.ibexa-field-edit__label'],
                 },
                 {
                     isValueValidator: false,
                     selector: `${SELECTOR_INPUT_FILE}`,
                     eventName: 'ibexa-invalid-file-type',
                     callback: 'showFileTypeError',
                     errorNodeSelectors: ['.ibexa-form-error'],
+                    invalidStateSelectors: ['.ibexa-field-edit__label'],
                 },
                 {
                     isValueValidator: false,
                     selector: SELECTOR_INPUT_ALT,
                     eventName: EVENT_CANCEL_ERROR,
                     callback: 'cancelErrors',
-                    invalidStateSelectors: ['.ibexa-data-source__field--alternativeText'],
+                    invalidStateSelectors: ['.ibexa-data-source__field--alternativeText', '.ibexa-field-edit__label'],
                     errorNodeSelectors: [`${SELECTOR_ALT_WRAPPER} .ibexa-form-error`],
                 },
             ],
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezimageasset.js b/src/bundle/Resources/public/js/scripts/fieldType/ezimageasset.js
@@ -254,20 +254,23 @@
                     eventName: 'change',
                     callback: 'validateInput',
                     errorNodeSelectors: ['.ibexa-form-error'],
+                    invalidStateSelectors: ['.ibexa-field-edit__label'],
                 },
                 {
                     isValueValidator: false,
                     selector: `${SELECTOR_INPUT_FILE}`,
                     eventName: 'ibexa-invalid-file-size',
                     callback: 'showFileSizeError',
                     errorNodeSelectors: ['.ibexa-form-error'],
+                    invalidStateSelectors: ['.ibexa-field-edit__label'],
                 },
                 {
                     isValueValidator: false,
                     selector: `${SELECTOR_INPUT_FILE}`,
                     eventName: 'ibexa-invalid-file-type',
                     callback: 'showFileTypeError',
                     errorNodeSelectors: ['.ibexa-form-error'],
+                    invalidStateSelectors: ['.ibexa-field-edit__label'],
                 },
             ],
         });
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezkeyword.js b/src/bundle/Resources/public/js/scripts/fieldType/ezkeyword.js
@@ -2,6 +2,7 @@
     const SELECTOR_FIELD = '.ibexa-field-edit--ezkeyword';
     const SELECTOR_TAGGIFY_CONTAINER = '.ibexa-data-source__taggify';
     const SELECTOR_TAGGIFY = '.ibexa-data-source__taggify .ibexa-taggify';
+    const SELECTOR_LABEL = '.ibexa-field-edit__label';
     const SELECTOR_ERROR_NODE = '.ibexa-form-error';
 
     class EzKeywordValidator extends ibexa.BaseFieldValidator {
@@ -16,7 +17,7 @@
         validateKeywords(event) {
             const fieldContainer = event.currentTarget.closest(SELECTOR_FIELD);
             const input = fieldContainer.querySelector('.ibexa-data-source__input-wrapper .ibexa-data-source__input');
-            const label = fieldContainer.querySelector('.ibexa-field-edit__label').innerHTML;
+            const label = fieldContainer.querySelector(SELECTOR_LABEL).innerText;
             const isRequired = input.required;
             const isEmpty = !input.value.trim().length;
             const isError = isEmpty && isRequired;
@@ -57,14 +58,14 @@
                     eventName: 'blur',
                     callback: 'validateKeywords',
                     errorNodeSelectors: [SELECTOR_ERROR_NODE],
-                    invalidStateSelectors: [SELECTOR_TAGGIFY],
+                    invalidStateSelectors: [SELECTOR_TAGGIFY, SELECTOR_LABEL],
                 },
                 {
                     selector: `${SELECTOR_FIELD} .ibexa-data-source__input.form-control`,
                     eventName: 'change',
                     callback: 'validateKeywords',
                     errorNodeSelectors: [SELECTOR_ERROR_NODE],
-                    invalidStateSelectors: [SELECTOR_TAGGIFY],
+                    invalidStateSelectors: [SELECTOR_TAGGIFY, SELECTOR_LABEL],
                 },
             ],
         });
@@ -86,7 +87,7 @@
             acceptKeys: ['Enter', ','],
         });
         const updateKeywords = updateValue.bind(this, keywordInput);
-        const taggifyInput = taggifyContainer.querySelector('.taggify__input');
+        const taggifyInput = taggifyContainer.querySelector('.ibexa-taggify__input');
 
         if (keywordInput.required) {
             taggifyInput.setAttribute('required', true);
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js b/src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js
@@ -5,6 +5,7 @@
     const SELECTOR_INFO_WRAPPER = '.ibexa-field-edit-preview__info';
     const SELECTOR_MEDIA_WRAPPER = '.ibexa-field-edit-preview__media-wrapper';
     const SELECTOR_INPUT_FILE = 'input[type="file"]';
+    const SELECTOR_LABEL = '.ibexa-field-edit__label-wrapper .ibexa-field-edit__label';
     const CLASS_MEDIA_WRAPPER_LOADING = 'ibexa-field-edit-preview__media-wrapper--loading';
 
     class EzMediaValidator extends ibexa.BaseFileFieldValidator {
@@ -23,7 +24,7 @@
             const isEmpty = isNaN(value);
             const isInteger = Number.isInteger(value);
             const isError = (isEmpty && isRequired) || (!isEmpty && !isInteger);
-            const label = input.closest(SELECTOR_INFO_WRAPPER).querySelector('.ibexa-field-edit-preview__label').innerHTML;
+            const label = input.closest(SELECTOR_INFO_WRAPPER).querySelector('.ibexa-field-edit-preview__label').innerText;
             const result = { isError };
 
             if (isEmpty) {
@@ -133,32 +134,38 @@
         const validator = new EzMediaValidator({
             classInvalid: 'is-invalid',
             fieldContainer,
+            fieldSelector: SELECTOR_FIELD,
+            labelSelector: SELECTOR_LABEL,
             eventsMap: [
                 {
                     isValueValidator: false,
                     selector: SELECTOR_INPUT_FILE,
                     eventName: 'ibexa-invalid-file-size',
                     callback: 'showFileSizeError',
                     errorNodeSelectors: ['.ibexa-field-edit--ezmedia .ibexa-form-error'],
+                    invalidStateSelectors: [SELECTOR_LABEL],
                 },
                 {
                     isValueValidator: false,
                     selector: SELECTOR_INPUT_FILE,
                     eventName: 'ibexa-invalid-file-type',
                     callback: 'showFileTypeError',
                     errorNodeSelectors: ['.ibexa-field-edit--ezmedia .ibexa-form-error'],
+                    invalidStateSelectors: [SELECTOR_LABEL],
                 },
                 {
                     selector: '.ibexa-field-edit-preview__dimensions .form-control',
                     eventName: 'blur',
                     callback: 'validateDimensions',
                     errorNodeSelectors: [`${SELECTOR_INFO_WRAPPER} .ibexa-form-error`],
+                    invalidStateSelectors: [SELECTOR_LABEL],
                 },
                 {
                     selector: SELECTOR_INPUT_FILE,
                     eventName: 'change',
                     callback: 'validateInput',
                     errorNodeSelectors: ['.ibexa-field-edit--ezmedia .ibexa-form-error'],
+                    invalidStateSelectors: [SELECTOR_LABEL],
                 },
             ],
         });
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezobjectrelationlist.js b/src/bundle/Resources/public/js/scripts/fieldType/ezobjectrelationlist.js
@@ -6,6 +6,7 @@
     const SELECTOR_FIELD_MULTIPLE = '.ibexa-field-edit--ezobjectrelationlist';
     const SELECTOR_FIELD_SINGLE = '.ibexa-field-edit--ezobjectrelation';
     const SELECTOR_INPUT = '.ibexa-data-source__input';
+    const SELECTOR_LABEL = '.ibexa-field-edit__label';
     const SELECTOR_BTN_ADD = '.ibexa-relations__table-action--create';
     const SELECTOR_ROW = '.ibexa-relations__item';
     const EVENT_CUSTOM = 'validateInput';
@@ -24,7 +25,7 @@
             const isEmpty = !currentTarget.value.length;
             const hasCorrectValues = currentTarget.value.split(',').every((id) => !isNaN(parseInt(id, 10)));
             const fieldContainer = currentTarget.closest(SELECTOR_FIELD_MULTIPLE) || currentTarget.closest(SELECTOR_FIELD_SINGLE);
-            const label = fieldContainer.querySelector('.ibexa-field-edit__label').innerHTML;
+            const label = fieldContainer.querySelector(SELECTOR_LABEL).innerText;
             const result = { isError: false };
 
             if (isRequired && isEmpty) {
@@ -48,13 +49,15 @@
                     selector: SELECTOR_INPUT,
                     eventName: 'blur',
                     callback: 'validateInput',
+                    invalidStateSelectors: [SELECTOR_LABEL],
                     errorNodeSelectors: ['.ibexa-form-error'],
                 },
                 {
                     isValueValidator: false,
                     selector: SELECTOR_INPUT,
                     eventName: EVENT_CUSTOM,
                     callback: 'validateInput',
+                    invalidStateSelectors: [SELECTOR_LABEL],
                     errorNodeSelectors: ['.ibexa-form-error'],
                 },
             ],
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezselection.js b/src/bundle/Resources/public/js/scripts/fieldType/ezselection.js
@@ -3,6 +3,7 @@
     const SELECTOR_SELECTED = '.ibexa-dropdown__selection-info';
     const SELECTOR_ERROR_NODE = '.ibexa-form-error';
     const EVENT_VALUE_CHANGED = 'change';
+    const SELECTOR_LABEL = '.ibexa-field-edit__label';
 
     class EzSelectionValidator extends ibexa.BaseFieldValidator {
         /**
@@ -18,7 +19,7 @@
             const hasSelectedOptions = !!fieldContainer.querySelector('.ibexa-data-source__input').value;
             const isRequired = fieldContainer.classList.contains('ibexa-field-edit--required');
             const isError = isRequired && !hasSelectedOptions;
-            const label = fieldContainer.querySelector('.ibexa-field-edit__label').innerHTML;
+            const label = fieldContainer.querySelector(SELECTOR_LABEL).innerText;
             const errorMessage = ibexa.errors.emptyField.replace('{fieldName}', label);
 
             return {
@@ -37,7 +38,7 @@
                 eventName: EVENT_VALUE_CHANGED,
                 callback: 'validateInput',
                 errorNodeSelectors: [SELECTOR_ERROR_NODE],
-                invalidStateSelectors: [SELECTOR_SELECTED],
+                invalidStateSelectors: [SELECTOR_SELECTED, SELECTOR_LABEL],
             },
         ],
     });
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezstring.js b/src/bundle/Resources/public/js/scripts/fieldType/ezstring.js
@@ -1,6 +1,7 @@
 (function (global, doc, ibexa) {
     const SELECTOR_FIELD = '.ibexa-field-edit--ezstring';
     const SELECTOR_SOURCE_INPUT = '.ibexa-data-source__input';
+    const SELECTOR_LABEL = '.ibexa-field-edit__label';
 
     class EzStringValidator extends ibexa.BaseFieldValidator {
         /**
@@ -17,7 +18,7 @@
             const isTooShort = event.target.value.length < parseInt(event.target.dataset.min, 10);
             const isTooLong = event.target.value.length > parseInt(event.target.dataset.max, 10);
             const isError = (isEmpty && isRequired) || (!isEmpty && (isTooShort || isTooLong));
-            const label = event.target.closest(SELECTOR_FIELD).querySelector('.ibexa-field-edit__label').innerHTML;
+            const label = event.target.closest(SELECTOR_FIELD).querySelector(SELECTOR_LABEL).innerText;
             const result = { isError };
 
             if (isEmpty) {
@@ -41,7 +42,7 @@
                 eventName: 'blur',
                 callback: 'validateInput',
                 errorNodeSelectors: ['.ibexa-form-error'],
-                invalidStateSelectors: [SELECTOR_SOURCE_INPUT],
+                invalidStateSelectors: [SELECTOR_SOURCE_INPUT, SELECTOR_LABEL],
             },
         ],
     });
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/eztext.js b/src/bundle/Resources/public/js/scripts/fieldType/eztext.js
@@ -1,5 +1,6 @@
 (function (global, doc, ibexa) {
     const SELECTOR_FIELD = '.ibexa-field-edit--eztext';
+    const SELECTOR_LABEL = '.ibexa-field-edit__label';
 
     class EzTextValidator extends ibexa.BaseFieldValidator {
         /**
@@ -12,7 +13,7 @@
          */
         validateInput(event) {
             const isError = event.target.required && !event.target.value.trim();
-            const label = event.target.closest(SELECTOR_FIELD).querySelector('.ibexa-field-edit__label').innerHTML;
+            const label = event.target.closest(SELECTOR_FIELD).querySelector(SELECTOR_LABEL).innerText;
             const errorMessage = ibexa.errors.emptyField.replace('{fieldName}', label);
 
             return {
@@ -30,6 +31,7 @@
                 selector: '.ibexa-field-edit--eztext textarea',
                 eventName: 'blur',
                 callback: 'validateInput',
+                invalidStateSelectors: [SELECTOR_LABEL],
                 errorNodeSelectors: ['.ibexa-form-error'],
             },
         ],
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezurl.js b/src/bundle/Resources/public/js/scripts/fieldType/ezurl.js
@@ -15,7 +15,7 @@
             const urlValue = input.value.trim();
             const isRequired = input.required;
             const isEmpty = !urlValue;
-            const label = input.closest(SELECTOR_FIELD_LINK).querySelector(SELECTOR_LABEL).innerHTML;
+            const label = input.closest(SELECTOR_FIELD_LINK).querySelector(SELECTOR_LABEL).innerText;
 
             if (isRequired && isEmpty) {
                 result.isError = true;
