diff --git a/src/bundle/Resources/encore/ez.js.config.js b/src/bundle/Resources/encore/ez.js.config.js index d593b89474..5cdaac80e9 100644 --- a/src/bundle/Resources/encore/ez.js.config.js +++ b/src/bundle/Resources/encore/ez.js.config.js @@ -244,6 +244,7 @@ module.exports = (Encore) => { path.resolve(__dirname, '../public/js/scripts/fieldType/base/base-field.js'), path.resolve(__dirname, '../public/js/scripts/fieldType/base/base-file-field.js'), path.resolve(__dirname, '../public/js/scripts/fieldType/base/base-preview-field.js'), + path.resolve(__dirname, '../public/js/scripts/fieldType/base/multi-input-field.js'), ...fieldTypes, path.resolve(__dirname, '../public/js/scripts/sidebar/extra.actions.js'), ]) diff --git a/src/bundle/Resources/public/js/scripts/fieldType/base/multi-input-field.js b/src/bundle/Resources/public/js/scripts/fieldType/base/multi-input-field.js new file mode 100644 index 0000000000..d56a2def2f --- /dev/null +++ b/src/bundle/Resources/public/js/scripts/fieldType/base/multi-input-field.js @@ -0,0 +1,23 @@ +(function(global, doc, eZ) { + class MultiInputFieldValidator extends eZ.BaseFieldValidator { + constructor({ containerSelectors, ...restProps }) { + super(restProps); + + this.containerSelectors = containerSelectors; + } + + toggleInvalidState(isError, config, input) { + super.toggleInvalidState(isError, config, input); + + this.containerSelectors.forEach((selector) => { + const invalidSelector = `.${this.classInvalid}`; + const container = input.closest(selector); + const method = !!container.querySelector(invalidSelector) ? 'add' : 'remove'; + + container.classList[method](this.classInvalid); + }); + } + } + + eZ.addConfig('MultiInputFieldValidator', MultiInputFieldValidator); +})(window, window.document, window.eZ); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezauthor.js b/src/bundle/Resources/public/js/scripts/fieldType/ezauthor.js index 7cd37567f6..fa28e48c96 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezauthor.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezauthor.js @@ -6,7 +6,7 @@ const SELECTOR_FIELD_EMAIL = '.ez-data-source__field--email'; const SELECTOR_FIELD_NAME = '.ez-data-source__field--name'; - class EzAuthorValidator extends global.eZ.BaseFieldValidator { + class EzAuthorValidator extends global.eZ.MultiInputFieldValidator { /** * Validates the 'name' input field value * @@ -182,6 +182,7 @@ const validator = new EzAuthorValidator({ classInvalid: 'is-invalid', fieldSelector: SELECTOR_FIELD, + containerSelectors: ['.ez-data-source__author', '.ez-field-edit--ezauthor'], eventsMap: [ { selector: `.ez-data-source__author ${SELECTOR_FIELD_NAME} .ez-data-source__input`,