Skip to content

IBX-9976: Fixed styles for invalid fields labels #1647

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: 4.6
Choose a base branch
from
Open

IBX-9976: Fixed styles for invalid fields labels #1647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c244450
IBX-9976: Fixed styles for invalid fields labels
albozek Jul 18, 2025
cae8c18
Isbn field required validation
albozek Jul 23, 2025
8d03388
Changed maplocation validation message
albozek Jul 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
},
],
});
Expand Down
4 changes: 3 additions & 1 deletion src/bundle/Resources/public/js/scripts/fieldType/ezboolean.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
/**
Expand All @@ -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 {
Expand All @@ -32,6 +33,7 @@
eventName: 'change',
callback: 'validateInput',
errorNodeSelectors: [SELECTOR_ERROR_NODE],
invalidStateSelectors: [SELECTOR_LABEL],
},
],
});
Expand Down
4 changes: 3 additions & 1 deletion src/bundle/Resources/public/js/scripts/fieldType/ezemail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
/**
Expand All @@ -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) {
Expand All @@ -39,6 +40,7 @@
eventName: 'blur',
callback: 'validateInput',
errorNodeSelectors: [SELECTOR_ERROR_NODE],
invalidStateSelectors: [SELECTOR_LABEL],
},
],
});
Expand Down
4 changes: 3 additions & 1 deletion src/bundle/Resources/public/js/scripts/fieldType/ezfloat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
/**
Expand All @@ -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) {
Expand Down Expand Up @@ -49,6 +50,7 @@
eventName: 'blur',
callback: 'validateFloat',
errorNodeSelectors: [SELECTOR_ERROR_NODE],
invalidStateSelectors: [SELECTOR_LABEL],
},
],
});
Expand Down
2 changes: 1 addition & 1 deletion src/bundle/Resources/public/js/scripts/fieldType/ezgmaplocation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@

if (validationResult.isError) {
const errorMessage = Translator.trans(
/* @Desc("Area below needs correction") */ 'ezmaplocation.create.message.error',
/* @Desc("Area above needs correction") */ 'ezmaplocation.create.message.error',
{},
'ibexa_fieldtypes_edit',
);
Expand Down
9 changes: 6 additions & 3 deletions src/bundle/Resources/public/js/scripts/fieldType/ezimage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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`],
},
{
Expand All @@ -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`],
},
],
Expand Down
3 changes: 3 additions & 0 deletions src/bundle/Resources/public/js/scripts/fieldType/ezimageasset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
},
],
});
Expand Down
9 changes: 5 additions & 4 deletions src/bundle/Resources/public/js/scripts/fieldType/ezkeyword.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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],
},
],
});
Expand All @@ -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);
Expand Down
9 changes: 8 additions & 1 deletion src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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) {
Expand Down Expand Up @@ -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],
},
],
});
Expand Down
5 changes: 4 additions & 1 deletion src/bundle/Resources/public/js/scripts/fieldType/ezobjectrelationlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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) {
Expand All @@ -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'],
},
],
Expand Down
5 changes: 3 additions & 2 deletions src/bundle/Resources/public/js/scripts/fieldType/ezselection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand All @@ -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 {
Expand All @@ -37,7 +38,7 @@
eventName: EVENT_VALUE_CHANGED,
callback: 'validateInput',
errorNodeSelectors: [SELECTOR_ERROR_NODE],
invalidStateSelectors: [SELECTOR_SELECTED],
invalidStateSelectors: [SELECTOR_SELECTED, SELECTOR_LABEL],
},
],
});
Expand Down
5 changes: 3 additions & 2 deletions src/bundle/Resources/public/js/scripts/fieldType/ezstring.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
/**
Expand All @@ -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) {
Expand All @@ -41,7 +42,7 @@
eventName: 'blur',
callback: 'validateInput',
errorNodeSelectors: ['.ibexa-form-error'],
invalidStateSelectors: [SELECTOR_SOURCE_INPUT],
invalidStateSelectors: [SELECTOR_SOURCE_INPUT, SELECTOR_LABEL],
},
],
});
Expand Down
4 changes: 3 additions & 1 deletion src/bundle/Resources/public/js/scripts/fieldType/eztext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
/**
Expand All @@ -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 {
Expand All @@ -30,6 +31,7 @@
selector: '.ibexa-field-edit--eztext textarea',
eventName: 'blur',
callback: 'validateInput',
invalidStateSelectors: [SELECTOR_LABEL],
errorNodeSelectors: ['.ibexa-form-error'],
},
],
Expand Down
2 changes: 1 addition & 1 deletion src/bundle/Resources/public/js/scripts/fieldType/ezurl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading
Loading