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

Avatar

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.

 

Nikhil2000_0-1660473343558.png

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

 
2 Replies

Avatar

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

 

 

 

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

 

 

Avatar

Level 1

Hi, 

 

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

 

Thanks