I have custom js to restrict dialog multifields

[ashar02]

I have component with dropdown select and a multifield so based on dropdown select value user should add selected  number of multifield items, Js is working fine but when dropdown value is 2 and when we click on add button it is displaying restrict message initially but it should display when more that 2 multifield items are added. Anyone can suggest the solution. My js logic:

(function ($, Sdocument, gAuthor) {

var COUNT_SELECT = ". /variation";

var maxCount;

$document.on("dialog-ready", addSelectlistener);

function (addSelectlistener){

var Scountselect = $("coral-select [name=‘" + COUNT_ SELECT + "’]");

var countSelect = $countSelect[0];

var countNumber = countSelect._initialValues[0];

if (countNumber == “4xs” ) {

countNumber = “4”;

}

maxCount = parseInt(countNumber);

countSelect.on ("change", adjustMultifieldItems) ;

}

function adjustMultifieldItems (event){

var countSelect - event. target;

var checkCount = countSelect.value;

if (checkCount ==‘4xs’){

checkCount=‘4'

}

maxCount=parseInt (checkCount);

}

$.validator.register("foundation.validation validator",{

selector: 'coral-multifield',

validate: function (el) {

var totalPanels - el["0"]. items. getAll(). length;

if(totalPanels !- maxCount) {

return "Please add

"+maxCount+ " items;

}

}});

}(jQuery, jQuery (document), Granite.author));

[Shailesh_Bassi_ · Accepted solution]

Hi @ashar02 for displaying the pop up alter or just the message, can also be achieved with the below snippet

$(document).on('click', '._coral-Button--primary', function() {
        var field = $(this).parent();
        var size = field.attr("data-maxlinksallowed");
        if (size) {
            var count = $(this).parent().find('coral-multifield-item').length-1;
            if (count >= size) {
				$(this).parent().find('coral-multifield-item').last().remove();

                if($(this).parent().find('.listCountCheck').length==0)
                	$(this).parent().find('coral-multifield-item').last().append('<div class="listCountCheck"><p>Max allowed items are 2</p></div>');
                return false;
            } 
        }
    });

Hope this helps!

Thanks