Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

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