Media fields are not highlighted during validation errors [#3396669]

Problem/Motivation

When editing a content type with a media field and the user makes an error, the message at the top of the screen shows that it has an
error but it does not highlight the field as with other fields

Steps to reproduce

Create a content type with a mandatory media field
Create a new item of content of this type but fail to add a media item.
Click on save and see that the error is reported at the top but that the field is not highlighted in a red border with red label text as other field types.

Proposed resolution

The 'error' class is added to the media field upon validation error, yet the associated styles for the 'error' class are not correctly applied. Update the CSS to fix the issue.

Remaining tasks

~~Update CSS to fix highlighting issue~~: Done
~~Add a new test to ensure that 'error' class gets added properly to media field during validation errors~~: Done
~~Test~~: Done
Review
Merge

User interface changes

Media fields are correctly flagged when in error.

Before patch

After patch

API changes

None.

Data model changes

None.

Release notes snippet

N/A

Comment	File	Size	Author
#36	Claro-media-validation.png	63.14 KB	sheetal.pathak
#35	not-reproducable.gif	4.8 MB	saurav-drupal-dev
#33	Screenshot at Jan 03 11-21-55.png	126.26 KB	shweta__sharma
#24	After Patch.png	93.46 KB	sandeep_k
#24	Before Patch.png	61.83 KB	sandeep_k
#21	Screenshot 2023-12-20 at 9.54.41 AM.png	60.16 KB	gauravvvv
#21	Screenshot 2023-12-20 at 9.54.11 AM.png	64.49 KB	gauravvvv
#3	has-error_class_not-3396669-3.patch	2.41 KB	rory downes

Issue fork drupal-3396669

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3396669-has-error changes, plain diff MR !5371
Check out this branch for the first time

Check out existing branch, if you already have it locally
3396669-has-error-class-not compare
Check out this branch for the first time

Check out existing branch, if you already have it locally

1 hidden branch

3396669-has-error-2

changes, plain diff MR !5822

Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

25 October 2023 at 15:30

Rory Downes created an issue. See original summary.

Comment #2

26 October 2023 at 07:41

Aditi Saraf made their first commit to this issue’s fork.

Comment #3

rory downes commented 27 October 2023 at 11:52

Status	File	Size
new	has-error_class_not-3396669-3.patch	2.41 KB

The proposed resolution was wrong as it turns out. This class is being applied correctly. It needed some changes to fieldset and form styling to make sure that such a field has the star when mandatory and goes red when the has-error class is added by existing code.

I attach a patch to make these changes that worked for the site where I spotted this issue.

Comment #4

shweta__sharma commented 6 November 2023 at 05:17

Status:

Active

» Needs review

Comment #5

smustgrave commented 6 November 2023 at 14:38

Version:	10.1.x-dev	» 11.x-dev
Status:	Needs review	» Needs work
Issue tags:		+Needs tests

Thank you for reporting. Moving to 11.x as the current dev branch.

Could we have a simple assert to verify the classname is appearing correctly.

Comment #6

sir-arturio commented 10 November 2023 at 11:17

Taking this on. (Hello from Drupal Contribution Sprints Helsinki!)

Comment #7

sir-arturio commented 10 November 2023 at 15:51

Was able to commit the patch to the merge request(?) branch. Had problems setting up the contrib environment. Maybe next time!

Comment #8

rory downes commented 10 November 2023 at 16:38

This has been moved to the 11.x branch as that is the current dev branch. However, my patch failed to apply against 11.x and I have not had time to fix that

Comment #9

13 November 2023 at 13:50

ameymudras made their first commit to this issue’s fork.

Comment #10

13 November 2023 at 14:04

ameymudras opened merge request !5371

Comment #11

ameymudras commented 13 November 2023 at 16:12

Status:

Needs work

» Needs review

Comment #12

smustgrave commented 13 November 2023 at 16:15

Status:

Needs review

» Needs work

Was previously tagged for tests which are still needed.

Comment #13

akhil babu

he/him

commented 15 December 2023 at 05:47

Assigned:

Unassigned

» akhil babu

Comment #14

akhil babu

he/him

commented 15 December 2023 at 09:23

Issue tags:

+ClaroContributionDay2023

Comment #15

akhil babu

he/him

commented 15 December 2023 at 10:11

Assigned:	akhil babu	» Unassigned
Status:	Needs work	» Needs review

Added tests as per #5. Not sure why spell check is failing. No spell check error in local

Comment #16

15 December 2023 at 11:59

Akhil Babu opened merge request !5822

Comment #17

15 December 2023 at 12:01

Akhil Babu changed the visibility of the branch 3396669-has-error-2 to hidden.

Comment #18

smustgrave commented 15 December 2023 at 13:30

Status:

Needs review

» Needs work

May need a rebase but other issues don’t seem to be having it so something that needs to be looked at before it can be merged

Comment #19

akhil babu

he/him

commented 19 December 2023 at 12:08

Status:

Needs work

» Needs review

Thanks @smustgrave. Rebasig fixed the pipeline.
Moving to needs review

Comment #20

smustgrave commented 19 December 2023 at 16:01

Status:

Needs review

» Needs work

before/after screenshots should be included in Issue summary.

Tests pass without the change so either the test is off or the title is wrong, is the class not being added or is the styling not being added? Based on the answer will need a title/issue summary update to be clear.

Screenshots should be added either way.

Comment #21

gauravvvv commented 20 December 2023 at 04:26

Issue summary:

View changes

Status	File	Size
new	Screenshot 2023-12-20 at 9.54.11 AM.png	64.49 KB
new	Screenshot 2023-12-20 at 9.54.41 AM.png	60.16 KB

Added before and after patch screenshot in the issue summary

Before patch

After patch

Comment #22

akhil babu

he/him

commented 20 December 2023 at 10:08

Title:	has-error class not applied to media fields	» Media fields are not highlighted during validation errors.
Issue summary:	View changes

Comment #23

akhil babu

he/him

commented 20 December 2023 at 10:11

Status:

Needs work

» Needs review

Thanks @smustgrave ,@Gauravvvv . The title was indeed incorrect. Updated the title and issue summary.
Moving back to needs review.

Comment #24

sandeep_k commented 20 December 2023 at 13:48

Status	File	Size
new	Before Patch.png	61.83 KB
new	After Patch.png	93.46 KB

Verified and tested patch MR !5371 mergeable on Drupal version- 11.0-dev. The patch was applied successfully and looks good to me.
Testing Steps:

Install Media module
Create a Content type & add a media field, make this field mandatory.
Go to content & add new content> Leave media field and save to reproduce. (Shared before results)
Download this patch and Apply.
Go back to Add Content and Reverify.

Testing Results:
Now the media field is getting highlighted, sharing after patch results.

We can move this ticket to RTBC.

Comment #25

smustgrave commented 20 December 2023 at 14:25

Status:

Needs review

» Needs work

Then the test can be removed as it's not testing anything with this issue.

Comment #26

gauravvvv commented 21 December 2023 at 03:33

Status:

Needs work

» Needs review

Comment #27

smustgrave commented 21 December 2023 at 14:37

Status:	Needs review	» Reviewed & tested by the community
Issue tags:	-Needs tests

Comment #28

31 December 2023 at 06:25

quietone made their first commit to this issue’s fork.

Comment #29

quietone commented 31 December 2023 at 06:26

Issue tags:

+Usability

I'm triaging RTBC issues. I read the IS and skimmed comments. The IS explains what this is about and there are before/after screenshots. All very helpful! I didn't find any unanswered questions.

This changes the UI so needs to be tagged for usability. I am adding the tag.

I tested this today on Drupal 11.x, standard install, using the steps in the issue summary. My results agree with what is in the issue summary.

There is a failing test, Drupal\Tests\media\FunctionalJavascript\MediaSourceOEmbedVideoTest so I pressed 'rebase' in Gitlab which will start the tests again.

Comment #30

shweta__sharma commented 2 January 2024 at 08:41

Status:

Reviewed & tested by the community

» Needs work

Merge blocked needs to be rebased

Comment #31

gauravvvv commented 3 January 2024 at 04:04

Status:

Needs work

» Needs review

Comment #32

shweta__sharma commented 3 January 2024 at 05:34

Rebased the MR

Comment #33

shweta__sharma commented 3 January 2024 at 05:52

Status:

Needs review

» Reviewed & tested by the community

Status	File	Size
new	Screenshot at Jan 03 11-21-55.png	126.26 KB

I tested on Drupal 11.x changes are done as mentioned in the Issue summary now the Media fields are highlighted during validation errors.

Attached screenshot for reference.

after-patch

Thanks

Comment #34

nod_

French

Lille

commented 19 February 2024 at 11:33

Status:

Reviewed & tested by the community

» Needs work

couple questions

Comment #35

saurav-drupal-dev commented 28 October 2024 at 18:53

Status	File	Size
new	not-reproducable.gif	4.8 MB

issue not fixed please check the attachment.

no issue found

Steps followed
Create a content type with a mandatory media field
Create a new item of content of this type but fail to add a media item.
Click on save and see that the error is reported at the top but that the field is not highlighted in a red border with red label text as other field types.

Comment #36

sheetal.pathak commented 8 July 2025 at 13:49

Status	File	Size
new	Claro-media-validation.png	63.14 KB

Tested changes are done as mentioned the Media fields are highlighted during validation errors.
Versions tested on
Drupal - 11.x-dev
Drupal - 11.2

1. Set Claro theme.
2. Create a content type -> Add media field ->make it mandatory.
3. Create a new item of content of this type but dont add media item.
4. Save. Error is highlighted with red border.

Can be moved to RTBC+

Comment #37

8 July 2025 at 13:49

Version:

11.x-dev

» main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Comment #38

quietone commented 23 August 2026 at 11:53

Title:	Media fields are not highlighted during validation errors.	» Media fields are not highlighted during validation errors
Status:	Needs work	» Postponed

The Claro theme was approved for removal in #3576460: [policy, no patch] Deprecate and remove Claro.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3576668: [meta] Tasks to deprecate Claro and the removal work in #3584638: [meta] Tasks to remove the Claro theme.