Expand my Community achievements bar.

SOLVED

Tagfield not working with foundation-validation

Avatar

Level 2

Hello,

 

We're using a tagfield (cq/gui/components/coral/common/form/tagfield) in a dialog and need to make the field required, but only if it's visible. To do this we've written custom validation using foundation-validation but it doesn't appear to be triggered for the tagfield type. Is this because it is not a granite field? Is there a better way to perform validation for this field? I have confirmed the same validation function works for other granite fields.

 

EV909_0-1666729354470.png

 

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

    $(window).adaptTo('foundation-registry').register("foundation.validation.validator", {
        selector: "[data-validation='required-if-visible']",
        validate: function(el) {
            .... this is never executed ....
        }});
})($, $(document));

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @EV909 , 

 

Tagfield resourceType - /libs/cq/gui/components/coral/common/form/tagfield is not adding the data-validation attribute to the generated markup. It has the data-foundation-validation attribute only and all the granite fields have data-validation and data-foundation-validation both. 

 

Please refer this file in your local AEM instance to see the attributes added by the tagfield - /libs/cq/gui/components/coral/common/form/tagfield/render.jsp

 

Change the selector attribute in your script with data-foundation-validation to run validation.

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

    $(window).adaptTo('foundation-registry').register("foundation.validation.validator", {
        selector: "[data-foundation-validation='required-if-visible']",
        validate: function(el) {
            .... this is never executed ....
        }});
})($, $(document));

Thanks,

Lokesh

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @EV909 , 

 

Tagfield resourceType - /libs/cq/gui/components/coral/common/form/tagfield is not adding the data-validation attribute to the generated markup. It has the data-foundation-validation attribute only and all the granite fields have data-validation and data-foundation-validation both. 

 

Please refer this file in your local AEM instance to see the attributes added by the tagfield - /libs/cq/gui/components/coral/common/form/tagfield/render.jsp

 

Change the selector attribute in your script with data-foundation-validation to run validation.

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

    $(window).adaptTo('foundation-registry').register("foundation.validation.validator", {
        selector: "[data-foundation-validation='required-if-visible']",
        validate: function(el) {
            .... this is never executed ....
        }});
})($, $(document));

Thanks,

Lokesh

Avatar

Level 2

Seems so obvious now that you've pointed it out. That works perfectly, thank you!