Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM Forms - Adding a class to field error

James_R_Green
Level 7
Level 7

Hi,

I have to override the div for error message on my form fields. I can see that the div is appended in the guideruntime.js markError function.

To override this my thoughtw were to:

* use the guidebridge event listener for validation complete

* remove the ootb div

* Add my custom div

My div is added but it appears that validation complete is actually called before the error is added to the DOM.

* Is there another listener that could be used?

* Or another approach to achieve the same result in javascript

Thanks,

James

1 Accepted Solution
James_R_Green
Correct answer by
Level 7
Level 7

In the end I ended up adding a mutataion observer listening for changes on each field added via guidebridge visit.

When the OOTB error message is added, I remove it.

Then in the guidebridge on elementValidationStatusChanged listener I add/remove my custom div.

Not ideal, but it works.

Thanks,

James

View solution in original post

7 Replies
Mayank_Gandhi
Community Advisor
Community Advisor

Hi James,

I will test this once and let you know.

Mayank_Gandhi
Community Advisor
Community Advisor

Hi James,

I didn't replace the OOTB div but intercepted it using JS and updated the text inside.

guideBridge.validate(radiobutton);

var Children  = document.getElementById('guideContainer-rootPanel-panel1392575902787-guideradiobutton__').children;

Children[2].innerHTML='New Test error';

guideContainer-rootPanel-panel1392575902787-guideradiobutton__  is my radio group div id.

1611115_pastedImage_0.png

James_R_Green
Level 7
Level 7

Great! I shall give this a go tomorrow.

But I suspect it is what I am after 

Thanks,

James

James_R_Green
Correct answer by
Level 7
Level 7

In the end I ended up adding a mutataion observer listening for changes on each field added via guidebridge visit.

When the OOTB error message is added, I remove it.

Then in the guidebridge on elementValidationStatusChanged listener I add/remove my custom div.

Not ideal, but it works.

Thanks,

James

View solution in original post

Mayank_Gandhi
Community Advisor
Community Advisor

Hi James,

Wasn't validateExpMessage helpful in such a case?

1620766_pastedImage_1.png

James_R_Green
Level 7
Level 7

Unfortunately that will only change the text of the error. The html and styling of my errors messages are very particular . Different number of divs different classes etc