AEM Forms - Adding a class to field error | Community
Skip to main content
James_R_Green
James_R_Green
Level 6
October 26, 2018
Solved

AEM Forms - Adding a class to field error

  • October 26, 2018
  • 7 replies
  • 2755 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by James_R_Green

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

7 replies

Mayank_Gandhi
Adobe Employee
Mayank_GandhiAdobe Employee
Adobe Employee
October 26, 2018

Hi James,

I will test this once and let you know.

James_R_Green
James_R_GreenAuthor
Level 6
October 26, 2018

Excellent thank you mayank!

Mayank_Gandhi
Adobe Employee
Mayank_GandhiAdobe Employee
Adobe Employee
October 31, 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.

    James_R_Green
    James_R_GreenAuthor
    Level 6
    October 31, 2018

    Great! I shall give this a go tomorrow.

    But I suspect it is what I am after 

    Thanks,

    James

    James_R_Green
    James_R_GreenAuthorAccepted solution
    Level 6
    November 1, 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

    Mayank_Gandhi
    Adobe Employee
    Mayank_GandhiAdobe Employee
    Adobe Employee
    November 13, 2018

    Hi James,

    Wasn't validateExpMessage helpful in such a case?

    James_R_Green
    James_R_GreenAuthor
    Level 6
    November 13, 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

    Terms & ConditionsAccessibility statement

    Loading footer...