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
BedrockMission!

Learn More

View all

Sign in to view all badges

AEM Forms - Adding a class to field error

Avatar

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile
James_R_Green
Level 5

26-10-2018

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile
James_R_Green
Level 5

01-11-2018

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

Answers (6)

Answers (6)

Avatar

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

310 likes

Total Posts

1,131 posts

Correct Reply

184 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

310 likes

Total Posts

1,131 posts

Correct Reply

184 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile
Mayank_Gandhi
Level 10

31-10-2018

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

Avatar

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile
James_R_Green
Level 5

13-11-2018

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

Avatar

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

310 likes

Total Posts

1,131 posts

Correct Reply

184 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

310 likes

Total Posts

1,131 posts

Correct Reply

184 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile
Mayank_Gandhi
Level 10

13-11-2018

Hi James,

Wasn't validateExpMessage helpful in such a case?

1620766_pastedImage_1.png

Avatar

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile
James_R_Green
Level 5

31-10-2018

Great! I shall give this a go tomorrow.

But I suspect it is what I am after 

Thanks,

James

Avatar

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile

Avatar
Validate 25
Level 5
James_R_Green
Level 5

Likes

47 likes

Total Posts

191 posts

Correct Reply

47 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile
James_R_Green
Level 5

26-10-2018

Excellent thank you mayank!

Avatar

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

310 likes

Total Posts

1,131 posts

Correct Reply

184 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

310 likes

Total Posts

1,131 posts

Correct Reply

184 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile
Mayank_Gandhi
Level 10

26-10-2018

Hi James,

I will test this once and let you know.