在aem touch ui对话框的自定义多字段中将字段设置为必填字段

在AEM touch UI对话框中，我有一个包含文本字段和路径字段的多字段

现在我想在我的自定义多字段中将标题设置为必填字段，但无法这样做

复合多字段选项卡的我的xml是：

 <advanced
            jcr:primaryType="nt:unstructured"
            jcr:title="Advanced"
            sling:resourceType="granite/ui/components/foundation/section">
            <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
            <items jcr:primaryType="nt:unstructured">
                <column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container"
                    class="column-full-width">
                    <items jcr:primaryType="nt:unstructured">
                        <fieldset
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/form/fieldset">
                            <layout
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                            <items jcr:primaryType="nt:unstructured">
                                <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/container">
                                    <items jcr:primaryType="nt:unstructured">
                                        <items
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/multifield"
                                            class="full-width"
                                            fieldDescription="Click 'Add field' button to add a new field."
                                            fieldLabel="Resources">
                                            <field
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                eaem-nested=""
                                                name="./items">
                                                <layout
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                                                <items jcr:primaryType="nt:unstructured">
                                                    <column
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/container">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <title
                                                                jcr:primaryType="nt:unstructured"
                                                                fieldDescription="Pdf/Video Title is mandatory."
                                                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                fieldLabel="Title: Pdf/video"
                                                                name="./title"/>
                                                            <path
                                                                jcr:primaryType="nt:unstructured"
                                                                rootPath="/content/dam"
                                                                sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
                                                                fieldLabel="Path: Pdf/video"
                                                                name="./path"/>
                                                        </items>
                                                    </column>
                                                </items>
                                            </field>
                                        </items>
                                    </items>
                                </column>
                            </items>
                        </fieldset>
                    </items>
                </column>
            </items>
        </advanced>

同样的JS代码是：

(function () {
var DATA_EAEM_NESTED = "data-eaem-nested";
var CFFW = ".coral-Form-fieldwrapper";

//reads multifield data from server, creates the nested composite multifields and fills them
function addDataInFields() {
    $(document).on("dialog-ready", function() {

        var $fieldSets = $("[" + DATA_EAEM_NESTED + "][class='coral-Form-fieldset']");
        if(_.isEmpty($fieldSets)){
            return;
        }

        var mNames = [];

        $fieldSets.each(function (i, fieldSet) {
            mNames.push($(fieldSet).data("name"));
        });

        mNames = _.uniq(mNames);

        var actionUrl = $fieldSets.closest("form.foundation-form").attr("action") + ".json";

        $.ajax(actionUrl).done(postProcess);

        function postProcess(data){
            _.each(mNames, function(mName){
                buildMultiField(data, mName);
            });
        }

        //creates & fills the nested multifield with data
        function fillNestedFields($multifield, valueArr){
            _.each(valueArr, function(record, index){
                $multifield.find(".js-coral-Multifield-add").click();

                //a setTimeout may be needed
                _.each(record, function(value, key){
                    var $field = $($multifield.find("[name='./" + key + "']")[index]);
                    $field.val(value);
                })
            })
        }

        function buildMultiField(data, mName){
            if(_.isEmpty(mName)){
                return;
            }

            $fieldSets = $("[data-name='" + mName + "']");

            //strip ./
            mName = mName.substring(2);

            var mValues = data[mName], $field, name;

            if(_.isString(mValues)){
                mValues = [ JSON.parse(mValues) ];
            }

            _.each(mValues, function (record, i) {
                if (!record) {
                    return;
                }

                if(_.isString(record)){
                    record = JSON.parse(record);
                }

                _.each(record, function(rValue, rKey){
                    $field = $($fieldSets[i]).find("[name='./" + rKey + "']");

                    if(_.isArray(rValue) && !_.isEmpty(rValue)){
                        fillNestedFields( $($fieldSets[i]).find("[data-init='multifield']"), rValue);
                    }else{
                            var select = $field.closest(".coral-Select").data("select");
                            if(select){
                                select.setValue(rValue);
                            }
                            else{
                        $field.val(rValue);
                        }
                    }
                });
            });
        }
    });
}

function fillValue($field, record){
    var name = $field.attr("name");

    if (!name) {
        return;
    }

    //strip ./
    if (name.indexOf("./") == 0) {
        name = name.substring(2);
    }

    record[name] = $field.val();

    //remove the field, so that individual values are not POSTed
    $field.remove();
}

//for getting the nested multifield data as js objects
function getRecordFromMultiField($multifield){
    var $fieldSets = $multifield.find("[class='coral-Form-fieldset']");

    var records = [], record, $fields, name;

    $fieldSets.each(function (i, fieldSet) {
        $fields = $(fieldSet).find("[name]");

        record = {};

        $fields.each(function (j, field) {
            fillValue($(field), record);
        });

        if(!$.isEmptyObject(record)){
            records.push(record)
        }
    });

    return records;
}

//collect data from widgets in multifield and POST them to CRX as JSON
function collectDataFromFields(){
    $(document).on("click", ".cq-dialog-submit", function () {
        var $form = $(this).closest("form.foundation-form");
        var $fieldSets = $("[" + DATA_EAEM_NESTED + "][class='coral-Form-fieldset']");
        var record, $fields, $field, name, $nestedMultiField;

        $fieldSets.each(function (i, fieldSet) {
            $fields = $(fieldSet).children().children(CFFW);

            record = {};

            $fields.each(function (j, field) {
                $field = $(field);

                //may be a nested multifield
                $nestedMultiField = $field.find("[data-init='multifield']");

                if($nestedMultiField.length == 0){
                    fillValue($field.find("[name]"), record);
                }else{
                    name = $nestedMultiField.find("[class='coral-Form-fieldset']").data("name");

                    if(!name){
                        return;
                    }

                    //strip ./
                    name = name.substring(2);

                    record[name] = getRecordFromMultiField($nestedMultiField);
                }
            });

            if ($.isEmptyObject(record)) {
                return;
            }

            //add the record JSON in a hidden field as string
            $('<input />').attr('type', 'hidden')
                .attr('name', $(fieldSet).data("name"))
                .attr('value', JSON.stringify(record))
                .appendTo($form);
        });
    });
}

$(document).ready(function () {
    addDataInFields();
    collectDataFromFields();
});

//extend otb multifield for adjusting event propagation when there are nested multifields
//for working around the nested multifield add and reorder
CUI.CustomMultifield = new Class({
    toString: "Multifield",
    extend: CUI.Multifield,

    construct: function (options) {
        this.script = this.$element.find(".js-coral-Multifield-input-template:last");
    },

    _addListeners: function () {
        this.superClass._addListeners.call(this);

        //otb coral event handler is added on selector .js-coral-Multifield-add
        //any nested multifield add click events are propagated to the parent multifield
        //to prevent adding a new composite field in both nested multifield and parent multifield
        //when user clicks on add of nested multifield, stop the event propagation to parent multifield
        this.$element.on("click", ".js-coral-Multifield-add", function (e) {
            e.stopPropagation();
        });

        this.$element.on("drop", function (e) {
            e.stopPropagation();
        });
    }
});

CUI.Widget.registry.register("multifield", CUI.CustomMultifield);})();

（函数（）{
var DATA_EAEM_NESTED=“DATA EAEM NESTED”；
var CFFW=“.coral Form fieldwrapper”；
//从服务器读取多字段数据，创建嵌套的复合多字段并填充它们
函数addDataInFields（）{
$（文档）.on（“对话框准备就绪”，函数（）{
var$fieldset=$（“[”+DATA\u EAEM\u NESTED+“][class='coral-Form-fieldset']”）；
if（u.isEmpty（$fieldset））{
返回；
}
var mNames=[]；
$fieldSet.每个（函数（i，fieldSet）{
mNames.push（$（fieldSet.data（“名称”））；
});
mNames=uq.uniq（mNames）；
var actionUrl=$fieldSets.closest（“form.foundation form”）.attr（“action”）+“.json”；
$.ajax（actionUrl）.done（后处理）；
函数后处理（数据）{
_.每个（mNames，函数（mName）{
buildMultiField（数据，mName）；
});
}
//用数据创建并填充嵌套的多字段
函数fillNestedFields（$multifield，valueArr）{
_.每个（值、功能（记录、索引）{
$multifield.find（“.js coral multifield add”）。单击（）；
//可能需要设置超时
_.每个（记录、功能（值、键）{
变量$field=$（$multifield.find（“[name=”./“+key+“]”）”[index]）；
$field.val（值）；
})
})
}
函数buildMultiField（数据，mName）{
if（u.isEmpty（mName））{
返回；
}
$fieldset=$（“[data name='”+mName+“]]”）；
//脱衣舞/
mName=mName.子串（2）；
var mValues=data[mName]，$field，name；
if（u.isString（mValues））{
mValues=[JSON.parse（mValues）]；
}
_.每个（M值，函数（记录，i）{
如果（！记录）{
返回；
}
如果（uu.isString（记录））{
record=JSON.parse（record）；
}
_.每个（记录、函数（右值、rKey）{
$field=$（$fieldset[i]）。查找（“[name=”./“+rKey+”]）；
if（u.isArray（右值）&&&&&！u.isEmpty（右值））{
fillNestedFields（$（$fieldset[i]）.find（“[data init='multifield']”），右值）；
}否则{
var select=$field.closest（.coral select”）.data（“select”）；
如果（选择）{
选择.setValue（右值）；
}
否则{
$field.val（右值）；
}
}
});
});
}
});
}
函数fillValue（$field，record）{
变量名称=$field.attr（“名称”）；
如果（！name）{
返回；
}
//脱衣舞/
if（name.indexOf（“./”）==0）{
name=name.substring（2）；
}
记录[名称]=$field.val（）；
//删除该字段，以便不过帐单个值
$field.remove（）；
}
//用于获取作为js对象的嵌套多字段数据
函数getRecordFromMultiField（$multifield）{
var$fieldset=$multifield.find（“[class='coral-Form-fieldset']”）；
var记录=[]，记录，$字段，名称；
$fieldSet.每个（函数（i，fieldSet）{
$fields=$（fieldSet.find（“[name]”）；
记录={}；
$fields.每个（函数（j，字段）{
fillValue（$（字段），记录）；
});
if（！$.isEmptyObject（记录））{
记录。推送（记录）
}
});
退货记录；
}
//从多字段中的小部件收集数据，并将其作为JSON发布到CRX
函数collectDataFromFields（）{
$（文档）.on（“单击“，”.cq对话框提交”），函数（）{
var$form=$（this.closest（“form.foundation form”）；
var$fieldset=$（“[”+DATA\u EAEM\u NESTED+“][class='coral-Form-fieldset']”）；
变量记录，$fields，$field，name，$nestedMultiField；
$fieldSet.每个（函数（i，fieldSet）{
$fields=$（fieldSet.children（）.children（CFFW）；
记录={}；
$fields.每个（函数（j，字段）{
$field=$（字段）；
//可以是嵌套的多字段
$nestedMultiField=$field.find（“[data init='multifield']”）；
如果（$nestedMultiField.length==0）{
fillValue（$field.find（“[name]”），记录）；
}否则{
name=$nestedMultiField.find（“[class='coral-Form-fieldset']”）。数据（“name”）；
<content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">
    <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
    <items jcr:primaryType="nt:unstructured">
        <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">
            <items jcr:primaryType="nt:unstructured">
                <fieldset jcr:primaryType="nt:unstructured" jcr:title="Test Mandatory TextField" sling:resourceType="granite/ui/components/foundation/form/fieldset">
                    <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                    <items jcr:primaryType="nt:unstructured">
                        <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">
                            <items jcr:primaryType="nt:unstructured">
                                <states jcr:primaryType="nt:unstructured" class="full-width" fieldDescription="Click '+' to add a new page" fieldLabel="Resources" sling:resourceType="granite/ui/components/foundation/form/multifield">
                                    <field jcr:primaryType="nt:unstructured" eaem-nested="" name="./states" sling:resourceType="granite/ui/components/foundation/form/fieldset">
                                        <layout jcr:primaryType="nt:unstructured" method="absolute" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                                        <items jcr:primaryType="nt:unstructured">
                                            <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <title jcr:primaryType="nt:unstructured" fieldDescription="Pdf/Video Title is mandatory." fieldLabel="Title: Pdf/video" name="./title" required="true" sling:resourceType="granite/ui/components/foundation/form/textfield"/>
                                                    <path jcr:primaryType="nt:unstructured" fieldDescription="Select Path" fieldLabel="Path for Pdf/video" name="./path" rootPath="/content" sling:resourceType="granite/ui/components/foundation/form/pathbrowser"/>
                                                </items>
                                            </column>
                                        </items>
                                    </field>
                                </states>
                            </items>
                        </column>
                    </items>
                </fieldset>
            </items>
        </column>
    </items>
</content>

(function () {
    var DATA_EAEM_NESTED = "data-eaem-nested";
    var CFFW = ".coral-Form-fieldwrapper";

    //reads multifield data from server, creates the nested composite multifields and fills them
    var addDataInFields = function () {
        $(document).on("dialog-ready", function() {
            var mName = $("[" + DATA_EAEM_NESTED + "]").data("name");

            if(!mName){
                return;
            }

            //strip ./
            mName = mName.substring(2);

            var $fieldSets = $("[" + DATA_EAEM_NESTED + "][class='coral-Form-fieldset']"),
                $form = $fieldSets.closest("form.foundation-form");

            var actionUrl = $form.attr("action") + ".json";

            var postProcess = function(data){
                if(!data || !data[mName]){
                    return;
                }

                var mValues = data[mName], $field, name;

                if(_.isString(mValues)){
                    mValues = [ JSON.parse(mValues) ];
                }

                _.each(mValues, function (record, i) {
                    if (!record) {
                        return;
                    }

                    if(_.isString(record)){
                        record = JSON.parse(record);
                    }

                    _.each(record, function(rValue, rKey){
                        $field = $($fieldSets[i]).find("[name='./" + rKey + "']");

                        if(_.isArray(rValue) && !_.isEmpty(rValue)){
                            fillNestedFields( $($fieldSets[i]).find("[data-init='multifield']"), rValue);
                        }else{
                            $field.val(rValue);
                        }
                    });
                });
            };

            //creates & fills the nested multifield with data
            var fillNestedFields = function($multifield, valueArr){
                _.each(valueArr, function(record, index){
                    $multifield.find(".js-coral-Multifield-add").click();

                    //a setTimeout may be needed
                    _.each(record, function(value, key){
                        var $field = $($multifield.find("[name='./" + key + "']")[index]);
                        $field.val(value);
                    })
                })
            };

            $.ajax(actionUrl).done(postProcess);
        });
    };

    var fillValue = function($field, record){
        var name = $field.attr("name");

        if (!name) {
            return;
        }

        //strip ./
        if (name.indexOf("./") == 0) {
            name = name.substring(2);
        }

        record[name] = $field.val();

        //remove the field, so that individual values are not POSTed
        $field.remove();
    };

    //for getting the nested multifield data as js objects
    var getRecordFromMultiField = function($multifield){
        var $fieldSets = $multifield.find("[class='coral-Form-fieldset']");

        var records = [], record, $fields, name;

        $fieldSets.each(function (i, fieldSet) {
            $fields = $(fieldSet).find("[name]");

            record = {};

            $fields.each(function (j, field) {
                fillValue($(field), record);
            });

            if(!$.isEmptyObject(record)){
                records.push(record)
            }
        });

        return records;
    };

    //collect data from widgets in multifield and POST them to CRX as JSON
    var collectDataFromFields = function(){
        $(document).on("click", ".cq-dialog-submit", function () {
            var $form = $(this).closest("form.foundation-form");

            var mName = $("[" + DATA_EAEM_NESTED + "]").data("name");
            var $fieldSets = $("[" + DATA_EAEM_NESTED + "][class='coral-Form-fieldset']");

            var record, $fields, $field, name, $nestedMultiField;

            $fieldSets.each(function (i, fieldSet) {
                $fields = $(fieldSet).children().children(CFFW);

                record = {};

                $fields.each(function (j, field) {
                    $field = $(field);

                    //may be a nested multifield
                    $nestedMultiField = $field.find("[data-init='multifield']");

                    if($nestedMultiField.length == 0){
                        fillValue($field.find("[name]"), record);
                    }else{
                        name = $nestedMultiField.find("[class='coral-Form-fieldset']").data("name");

                        if(!name){
                            return;
                        }

                        //strip ./
                        name = name.substring(2);

                        record[name] = getRecordFromMultiField($nestedMultiField);
                    }
                });

                if ($.isEmptyObject(record)) {
                    return;
                }

                //add the record JSON in a hidden field as string
                $('<input />').attr('type', 'hidden')
                    .attr('name', mName)
                    .attr('value', JSON.stringify(record))
                    .appendTo($form);
            });
        });
    };

    $(document).ready(function () {
        addDataInFields();
        collectDataFromFields();
    });

    //extend otb multifield for adjusting event propagation when there are nested multifields
    //for working around the nested multifield add and reorder
    CUI.Multifield = new Class({
        toString: "Multifield",
        extend: CUI.Multifield,

        construct: function (options) {
            this.script = this.$element.find(".js-coral-Multifield-input-template:last");
        },

        _addListeners: function () {
            this.superClass._addListeners.call(this);

            //otb coral event handler is added on selector .js-coral-Multifield-add
            //any nested multifield add click events are propagated to the parent multifield
            //to prevent adding a new composite field in both nested multifield and parent multifield
            //when user clicks on add of nested multifield, stop the event propagation to parent multifield
            this.$element.on("click", ".js-coral-Multifield-add", function (e) {
                e.stopPropagation();
            });

            this.$element.on("drop", function (e) {
                e.stopPropagation();
            });
        }
    });
CUI.Widget.registry.register("multifield", CUI.Multifield);
})();