How to set min max item in Multifield AEM 6.3?

Hi All,

I have also achieved the above using below code snippet:

For Maximum links validation:

Add a new property - "maxlinksallowed", type- String to the multifield node in your cq:dialog.

Add below javascript code to touchui js file.

            $(".js-coral-Multifield-add").click(function() {

            var field = $(this).parent();

            var size = field.attr("data-maxlinksallowed");

            if (size) {

                var ui = $(window).adaptTo("foundation-ui");

                var totalLinkCount = $(this).prev('ol').children('li').length;

                if (totalLinkCount >= size) {

                    ui.alert("Warning", "Maximum " + size + " links are allowed!", "notice");

                    return false;

                }

             }

           });

For Minimum links validation:

Add a new property - "minlinksallowed" , type- String to the multifield node in your cq:dialog.

Add below javascript code to touchui js file.

        $(document).on("click", ".cq-dialog-submit", function () {

            var $multifields = $("[" + DATA_EAEM_NESTED + "]");

            if(_.isEmpty($multifields)){

                return;

            }

            var $form = $(this).closest("form.foundation-form");

            var fieldd = $(".coral-Multifield");

            var minsize = fieldd.attr("data-minlinksallowed");

            var multilinks = $multifields.length-1;

            if (multilinks < minsize) {

                var ui = $(window).adaptTo("foundation-ui");

                ui.alert("Warning", "Minimum " + minsize + " link is required!", "notice");

                return false;

            }

        });

Regards,

Mayank Saxena

Cognizant Technology Solutions

I am able to make it work for Coral by setting validation property with value min:mx
And on ADD button(for max) and Submit(for min) click , I am reading this property and doing validating like below:

//For min

$(document).on("click", ".cq-dialog-submit", function(e) {

        var $form = $(this).closest("form.foundation-form");

        var field = $form.find("[data-granite-coral-multifield-name='./phoneitems']");

        var attrDV = field.attr("data-validation");

        var size;

        if (typeof attrDV !== undefined && attrDV !== false) {

            if(typeof attrDV.split(':')[1] !== undefined){

                    size = attrDV.split(':')[0];

                    }

        }

        // console.log("min size : " + size)

        if (size) {

            var ui = $(window).adaptTo("foundation-ui");

            var totalLinkCount = field.children('coral-multifield-item').length;

            if (totalLinkCount < size) {

                ui.alert("Warning", "Minimum " + size + " Phone numbers are allowed!", "notice");

                return false;

            } else {

                return true;

            }

        }

    });

//For Max

$(document).on("dialog-ready", function() {

        $(".coral-Button").click(function() {

            var attr = $(this).attr('coral-multifield-add');

            if (typeof attr !== typeof undefined && attr !== false) {

                var field = $(this).parent();

                var attrDV = field.attr("data-validation");

                var size;

                if (typeof attrDV !== undefined && attrDV !== false) {

                    if(typeof attrDV.split(':')[1] !== undefined){

                    size = attrDV.split(':')[1];

                    }

                }

                //console.log(size);

                if (size) {

                    var ui = $(window).adaptTo("foundation-ui");

                    var totalLinkCount = $(this).parent().children('coral-multifield-item').length;

                    if (totalLinkCount >= size) {

                        ui.alert("Warning", "Maximum " + size + " Phone numbers are allowed!", "notice");

                        return false;

                    }

                }

            }

        });

    });

Hi,

This validation logic can be easily  achieved with foundation validation.

Difference with coral UI 2 and UI 3 would be the HTML markup in identifying the multifield items.

Below link has validation for fieldLimit. Same can be followed for min max with change in logic alone.

Custom Validation for Coral UI 3 Multifield using foundation-validation

Did you find a solution to implement the same for coral?

it working with granite/ui/components/foundation/form/multifield

but not working with granite/ui/components/coral/foundation/form/multifield

Coral is not working.

Hi,

It has worked already.

Thank you so much!

Excellent response!

I got it working on 6.3 - i can only put 3 Multifield here:

Watch the demo and then install the package here:

Experiencing Adobe Experience Manager - Day CQ: AEM 61 - Sample Granite Widget In Touch UI extending Multifield to Limit…

Thank you so much,

I'm try. But not work in AEM 6.3.