Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Coral Tool tip not working after adding dialog multifield validation


Level 1

Hi All,


I have created a custom validation for multifield in my header component, but after adding the validation to the dialog via the extraClientLibs property, the tool tip stops working in my dialog, if I hover over the error message icon or field description icon no message is displayed. Please refer to the below screenshot.



if i remove the validation clientlib from cq:dialog extraClientlibs , tool tip starts working for the field description.


I am working on AEM 6.5 SP 13. Can you please help? Below is code for Jquery multifield validation


(function (window, $) {
    "use strict";
    console.log('<-----Clientlib Loaded----->');
    var registry = $(window).adaptTo("foundation-registry");
    registry.register("foundation.validation.validator", {
        selector: "[data-validation=header-multifield]",
        validate: function (element) {
            var el = $(element);
            let max = el.data("max-items");
            let min = el.data("min-items");
            let items = el.children("coral-multifield-item").length;
            console.log("{} :{} :{} ", max, min, items);
            if (items > max) {
                 return "Only" + max + " nav items are allowed";
            if (items < min) {
                return "Atleast" + min + " nav items needed";

})(window, Granite.$);

2 Replies


Community Advisor

Hi @Nikhil2000,


I just tried using your js in my extraClientlib, but I couldn't generate this issue. (coral)
can you share your dialog XML for debugging this?

Also, see if this js helps you,

(function ($, $document) {
    "use strict";

    $.validator.register("foundation.validation.validator", {
        selector: "coral-multifield",
        validate: function (el) {

            var totalPanels = el["0"].items.getAll().length;
            var max;
            const ui = $(window).adaptTo("foundation-ui");

            if ($(el).data("max-item")) {
                max = $(el).data("max-item");
                if (totalPanels > max) {
                    return ui.alert("Maximum numbers of items allowed are: " + max);

})($, $(document));

parallel to your field node, create a granite node like this








Level 1



I will try your JS and also share my dialog XML soon. Thanks for your reply