How to give limit on number of multifield items in touch ui

Hi 

Adding to what scott said,

Please have a look at this similar post:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__ickw-im_trying_todisable.html

// Multifield Limits in Touch UI    

    After working with AEM there are a number of ways to accomplish this, but I found it easiest to handle via clientlibs that are called during AEM dialogs. I have had to do it to a project myself.

    You will need to do two things:

    Create a clientlib that has logic 
    Add that clientlib to be called when that specific dialog is in use
    I would suggest watching this cq gem as it demonstrates how to do the above as far as getting the logic to javascript to fire at the right time. The rest will be jQuery magic.

    http://dev.day.com/content/ddc/en/gems/customizing-dialog-fields-in-touch-ui.html

Reference article :- http://stackoverflow.com/questions/33601730/how-to-limit-nested-multifield-in-aem

// Using Jquery you can achieve this.You can try the below steps: 

1) Create the clientlib folder under your component with categories (String[]) - cq.authoring.dialog
2) In the js file write the below code:

(function($, $document) { "use strict"; $document.on("dialog-ready", function() { var fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' " + "data-init='quicktip' data-quicktip-type='error' />"); var currentTimeMillis = new Date().getTime(); var countValidatorId = "multifield-validator-" + parseInt(currentTimeMillis); var $countValidatorField = $("#" + countValidatorId), $multifield = $("div.coral-Multifield"), fieldLimit = 3, count = $multifield.find(".coral-Multifield-input").length; $.validator.register({ selector: $countValidatorField, validate: validate, show: show, clear: clear }); $multifield.on("click", ".js-coral-Multifield-add", function(e) { console.log("Add Called"); ++count; adjustMultifieldUI(); }); $multifield.on("click", ".js-coral-Multifield-remove", function(e{ --count; adjustMultifieldUI(); }); function adjustMultifieldUI() { $countValidatorField.checkValidity(); $countValidatorField.updateErrorUI(); var $addButton = $multifield.find(".js-coral-Multifield-add"); if (count >= fieldLimit) { $addButton.attr('disabled', 'disabled'); var arrow = $multifield.closest("form").hasClass("coral-Form--vertical") ? "right" : "top"; fieldErrorEl.clone() .attr("data-quicktip-arrow", arrow) .attr("data-quicktip-content", "Limit is 3") .insertAfter($multifield); } else { $addButton.removeAttr('disabled'); $multifield.nextAll(".coral-Form-fielderror").tooltip("hide").remove(); } } function validate() { if (count <= fieldLimit) { return null; } return "Limit set to " + fieldLimit; } function show($el, message) { this.clear($countValidatorField); var arrow = $multifield.closest("form").hasClass("coral-Form--vertical") ? "right" : "top"; fieldErrorEl.clone() .attr("data-quicktip-arrow", arrow) .attr("data-quicktip-content", message) .insertAfter($multifield); } function clear() { $multifield.nextAll(".coral-Form-fielderror").tooltip("hide").remove(); } }); })($, $(document));

I hope this would help you.

~kautuk