Multifield and Dialog data in jQuery using Coral UI - AEM 6.3

A simple way to get the multifield and dialog data in your clientlib’s jquery to perform any kind of validations in 6.3 and above versions:

Step 1: Creating your clientlibs folder with the following properties:

<?xml version=”1.0″ encoding=”UTF-8″?>
<jcr:root xmlns:cq=”http://www.day.com/jcr/cq/1.0&#8243; xmlns:jcr=”http://www.jcp.org/jcr/1.0&#8243;
jcr:primaryType=”cq:ClientLibraryFolder”
categories=”[cq.authoring.dialog,abc.components.banner]”
dependencies=”[granite.jquery]”/>

Step 2: I am creating a event listener in my case and in that I will be getting the values of multifield.

(function(document, $, ns) {
“use strict”;
$(document).on(“click”, “.cq-dialog-submit”, function(e) {
var $formminmax = $(this).closest(“form.foundation-form”);
var text= $formminmax.find(“[name=’./text’]”).val(); // This will contain the textfield data having name property as idSelector.
var field = $formminmax.find(“[data-granite-coral-multifield-name=’./multi’]”);
var totalLinkCount = field.children(‘coral-multifield-item’).length;
var prodData = []; //This will store the multifield data from the dialog.
for (var i = 0; i < totalLinkCount; i++) {
prodData.push(field.find($(“[name=’./data’]”)[i]).val());
}
});

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