Expand my Community achievements bar.

multifield validation


Level 1

(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') {

// 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

2 Replies


Level 6

Hi @Vinodbandaru ,


Please check if the base multi-field has attribute data-foundation-validation with value starting with "gridLayout-multifield-min-max". If it has and still does not work, could you please try with a different value for the base layout and add that to the selector value.