How to limit nested multifield in AEM?

Question

I am using nested multifield for touch UI in AEM 6.1 and I have requirement to limit the multifield , I already saw acs common (maxItems--validation)but its not helping me . Please provide your guidance on this.

Vivek Dhiman Vivek Dhiman · Accepted Answer · 2015-11-09T17:24:49

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

You have to do the refactoring of this code and removed some unused properties, but can give you start. Also make sure your js is getting call once you open the dialog. Happy Diwali Dude.

How to limit nested multifield in AEM?

2 Answers