Merge up/ibx 11005

src/bundle/Resources/public/js/scripts/fieldType/ibexa_image.js

@@ -92,9 +92,8 @@
             const dataContainer = this.fieldContainer.querySelector('.ibexa-field-edit__data');
             const isFileFieldEmpty = fileField.files && !fileField.files.length && dataContainer && !dataContainer.hasAttribute('hidden');
             const { isRequired } = event.target.dataset;
-            const alreadyIsError = this.fieldContainer.classList.contains(this.classInvalid);
             const isEmpty = !event.target.value;
-            const isError = alreadyIsError || (isEmpty && isRequired && !isFileFieldEmpty);
+            const isError = isEmpty && isRequired && !isFileFieldEmpty;
             const label = event.target.closest(SELECTOR_ALT_WRAPPER).querySelector('.ibexa-data-source__label').innerText;
             const result = { isError };
 

src/bundle/Resources/public/js/scripts/fieldType/ibexa_image_asset.js

@@ -2,6 +2,9 @@
     const SELECTOR_FIELD = '.ibexa-field-edit--ibexa_image_asset';
     const SELECTOR_INPUT_FILE = 'input[type="file"]';
     const SELECTOR_INPUT_DESTINATION_CONTENT_ID = '.ibexa-data-source__destination-content-id';
+    const SELECTOR_ALT_WRAPPER = '.ibexa-field-edit-preview__image-alt';
+    const SELECTOR_INPUT_ALT = '.ibexa-field-edit-preview__image-alt .ibexa-data-source__input';
+    const EVENT_CANCEL_ERROR = 'ibexa-cancel-errors';
     const token = doc.querySelector('meta[name="CSRF-Token"]').content;
     const { showErrorNotification } = ibexa.helpers.notification;
     const { showSuccessNotification } = ibexa.helpers.notification;
@@ -159,6 +162,7 @@
 
             this.inputDestinationContentId.value = destinationContentId;
             this.inputField.value = '';
+            previewAlt.dispatchEvent(new CustomEvent(EVENT_CANCEL_ERROR));
             this.showPreview();
         }
 
@@ -232,7 +236,7 @@
             super.resetInputField();
 
             this.inputDestinationContentId.value = '';
-            this.fieldContainer.querySelector('.ibexa-field-edit-preview__image-alt .ibexa-data-source__input').value = '';
+            this.fieldContainer.querySelector(SELECTOR_INPUT_ALT).value = '';
         }
 
         /**
@@ -249,8 +253,35 @@
         }
     }
 
+    class IbexaImageAssetFieldValidator extends ibexa.BaseFileFieldValidator {
+        /**
+         * Validates the alternative text input
+         *
+         * @method validateAltInput
+         * @param {Event} event
+         * @returns {Object}
+         * @memberof IbexaImageAssetFieldValidator
+         */
+        validateAltInput(event) {
+            const fileField = this.fieldContainer.querySelector(SELECTOR_INPUT_FILE);
+            const dataContainer = this.fieldContainer.querySelector('.ibexa-field-edit__data');
+            const isFileFieldEmpty = fileField.files && !fileField.files.length && dataContainer && !dataContainer.hasAttribute('hidden');
+            const isRequired = this.fieldContainer.classList.contains('ibexa-field-edit--required');
+            const isEmpty = !event.target.value.trim();
+            const isError = isEmpty && isRequired && !isFileFieldEmpty;
+            const label = event.target.closest(SELECTOR_ALT_WRAPPER).querySelector('.ibexa-data-source__label').innerText;
+            const result = { isError };
+
+            if (isEmpty) {
+                result.errorMessage = ibexa.errors.emptyField.replace('{fieldName}', label);
+            }
+
+            return result;
+        }
+    }
+
     doc.querySelectorAll(SELECTOR_FIELD).forEach((fieldContainer) => {
-        const validator = new ibexa.BaseFileFieldValidator({
+        const validator = new IbexaImageAssetFieldValidator({
             classInvalid: 'is-invalid',
             fieldContainer,
             eventsMap: [
@@ -277,6 +308,21 @@
                     errorNodeSelectors: ['.ibexa-form-error'],
                     invalidStateSelectors: ['.ibexa-field-edit__label'],
                 },
+                {
+                    selector: SELECTOR_INPUT_ALT,
+                    eventName: 'blur',
+                    callback: 'validateAltInput',
+                    invalidStateSelectors: ['.ibexa-data-source__field--alternativeText'],
+                    errorNodeSelectors: [`${SELECTOR_ALT_WRAPPER} .ibexa-form-error`],
+                },
+                {
+                    isValueValidator: false,
+                    selector: SELECTOR_INPUT_ALT,
+                    eventName: EVENT_CANCEL_ERROR,
+                    callback: 'cancelErrors',
+                    invalidStateSelectors: ['.ibexa-data-source__field--alternativeText'],
+                    errorNodeSelectors: [`${SELECTOR_ALT_WRAPPER} .ibexa-form-error`],
+                },
             ],
         });