Tagfield not working with foundation-validation

[EV909]

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.

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

[Lokesh_Vajrala · Accepted solution]

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

[EV909]

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