(function ($, document) {
"use strict";
$(document).on("foundation-field-change", "coral-select[name='./layoutType']", function (e) {
let layoutType = $(this).val();
console.log("variation down:", layoutType);
if (layoutType == 'grid') {
$(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
selector: "[data-foundation-validation^='gridLayout-multifield-min-max']",
validate: function (el) {
let min = el.getAttribute("data-min");
min = parseInt(min);
let max = el.getAttribute("data-max");
let domitems = el.items;
if (max != NaN && el.items.length > max && layoutType == 'grid') {
domitems.last().remove();
// items added are more than allowed, return error
return "Max allowed tems is " + max
}
if (min != NaN && el.items.length < min && layoutType == 'grid') {
// items deleted less than allowed, return error
return "Minimum allowed Items is " + min;
}
}
});
}
});
})(jQuery, jQuery(document));
The above is the multifield validation which supposed to work based on variation layoutType.
in my component i have 2 variation base and grid-currently iam facing issue like if author selects base and fills all the fileds and able to close the dialog but if author switches to grid and then switch back to base it is not allowing to close the dialog beacuse of the above validation applying to grid variation .Can anyone help me with this that if i choose base then the above validation should not apply