Coral Tool tip not working after adding dialog multifield validation

[Nikhil2000]

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);

            console.log("el",el)

            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.$);

[B_Sravan]

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

<granite:data
       jcr:primaryType="nt:unstructured"
       max-item="6"/>

[Nikhil2000]

Hi, 

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

Thanks