根据用户选择将验证动态添加到CQ5对话框中的多字段

Question

我需要根据选择字段的值将多字段的标题设为必选。 这就是我的多视野

var foo = {};

foo.testWidget = CQ.Ext.extend(CQ.form.CompositeField, {

/**
 * @private
 * @type CQ.Ext.form.Hidden
 */
hiddenField : null,

titleField:null,
subTitleField:null,
description:null,
elementImage:null,
linkText:null,
linkURL:null,
anchorField:null,
emptyField:null,


constructor : function(config) {
    config = config || {};
    var defaults = {
        "border" : true
    };
    config = CQ.Util.applyDefaults(config, defaults);
    foo.testWidget.superclass.constructor.call(this, config);
},

// overriding CQ.Ext.Component#initComponent
initComponent : function() {
    foo.testWidget.superclass.initComponent.call(this);

    this.hiddenField = new CQ.Ext.form.Hidden({
        name : this.name
    });
    this.add(this.hiddenField);


    this.titleField = new CQ.Ext.form.TextField({
        fieldLabel : "Title",
        labelStyle : 'display:block;width:85px;',
        maxLength : "50",
        cls : "potato",
        width : 400,
        allowBlank : true,
        listeners : {
            change : {
                scope : this,
                fn : this.updateHidden
            }
        }
    });
    this.add(this.titleField);

    this.subTitleField = new CQ.Ext.form.TextField({
        fieldLabel : "Subtitle",
        labelStyle : 'display:block;width:85px;',
        maxLength : "150",
        width : 400,
        allowBlank : true,
        listeners : {
            change : {
                scope : this,
                fn : this.updateHidden
            }
        }
    });
    this.add(this.subTitleField);

    this.description = new CQ.Ext.form.TextArea({
        fieldLabel : "Description",
        labelStyle : 'display:block;width:85px;',
        maxLength : "200",
        width : 400,
        allowBlank : true,
        listeners : {
            change : {
                scope : this,
                fn : this.updateHidden
            }
        }
    });
    this.add(this.description);

    this.elementImage = new CQ.form.PathField({
        fieldLabel : "Banner Image",
        fieldDescription : "Specify image path",
        labelStyle : 'display:block;width:85px;',
        rootPath : "/content/dam/foo",
        editable : false,
        width : 400,
        allowBlank : true,
        listeners : {
            dialogselect : {
                scope : this,
                fn : this.updateHidden
            },
            change : {
                scope : this,
                fn : this.updateHidden
            }
        }
    });
    this.add(this.elementImage);

    this.linkText = new CQ.Ext.form.TextField({
        fieldLabel : "Enter Link Text",
        labelStyle : 'display:block;width:92px;',
        maxLength : "40",
        width : 400,
        allowBlank : false,
        listeners : {
            change : {
                scope : this,
                fn : this.updateHidden
            }
        }
    });
    this.add(this.linkText);

    this.linkURL = new CQ.form.PathField({
        fieldLabel : "Complete URL for the element CTA",
        labelStyle : 'display:block;width:85px;',
        rootPath : "/content/foo",
        editable : true,
        width : 400,
        allowBlank : false,
        listeners : {
            dialogselect : {
                scope : this,
                fn : this.updateHidden
            },
            change : {
                scope : this,
                fn : this.updateHidden
            }
        }
    });
    this.add(this.linkURL);

     this.anchorField =  new CQ.form.Selection({
        type:"checkbox",
        fieldLabel:"Link Target",
        fieldDescription:"Select the browser tab in which the link should be opened",
        options:displayOptionsTarget(),
        listeners: {
            selectionchanged: {
                scope:this,
                fn: this.updateHidden
            }
        },
        optionsProvider: this.optionsProvider
    });
    this.add(this.anchorField);


    /**
     * Added a dummy Empty field to avoid ArrayIndexOutOfBound Exception in the resultant array
     * Without this hidden field, the empty values will be not be added to the multifield list
     */
    this.emptyField = new CQ.Ext.form.TextField({
        fieldLabel: "Empty Field",
        width:200,
        maxLength: "30",
        defaultValue: "empty",
        hidden:true,
        value:"empty",
    });
    this.add(this.emptyField);

},

// overriding CQ.form.CompositeField#setValue
setValue : function(value) {

    var parts = value.split(/<#-@>/);
    console.log("Related Resources Slider #parts", parts);
    this.titleField.setValue(parts[0]);
    this.subTitleField.setValue(parts[1]);
    this.description.setValue(parts[2]);
    this.elementImage.setValue(parts[3]);
    this.linkText.setValue(parts[4]);
    this.linkURL.setValue(parts[5]);
    this.anchorField.setValue(parts[6]);
    this.emptyField.setValue(parts[7]);


    this.hiddenField.setRawValue(value);

},

// overriding CQ.form.CompositeField#getValue
getValue : function() {
    return this.getRawValue();
},

// overriding CQ.form.CompositeField#getRawValue
getRawValue : function() {
    return this.titleField.getValue() + "<#-@>"
            + this.subTitleField.getValue() + "<#-@>"
            + this.description.getValue() + "<#-@>"
            + this.elementImage.getValue() + "<#-@>"
            + this.linkText.getValue() + "<#-@>"
            + this.linkURL.getValue() + "<#-@>"
            + this.anchorField.getValue() + "<#-@>"
            + this.emptyField.getValue()
},

// private
updateHidden : function() {
    this.hiddenField.setValue(this.getValue());
}

});

function displayOptionsTarget()
{
return [{
    "text":"check to open link in new tab",
    "value":true

}]
}


// register xtype
foo.testWidget.XTYPE = "testXtype";
CQ.Ext.reg(foo.testWidget.XTYPE, foo.testWidget);

我在对话框中添加了一个侦听器，该对话框在beforesubmit执行以下JavaScript代码

function(){
var dialog = this.findParentByType('dialog');
var selection = this.findByType('selection');
var choice = selection[0].getValue();
var multi = this.findByType('customMultifield')[0];
var textfield = multi.findByType('textfield')[0];

if(choice=2){

    textfield. markInvalid("mandatory for current choice");
    return false;
}
}

尽管它有些效果，但是发生的是，如果我添加了两组多字段条目，其中第一组具有标题，第二组没有标题，则它将第一组的titleField标记为无效。

如何将正确的文本字段（每个多字段条目中的titleField）设置为无效。

Answer 1

这将不起作用，因为您始终在检查第一个文本字段的值并将其标记为无效。 取而代之的是，您将不得不遍历所有文本字段，检查所需的文本字段并适当地将其标记为无效。 听众应该看起来像这样。

function(dlg){
    var choice = dlg.getField('./choice').getValue();
    var submit = true;
    var multi = dlg.findByType('multifield')[0];
    if(choice == 2) {
    var textfields = multi.findByType('textfield');
    for(var i=0; i < textfields.length; i++) {
        if(textfields[i].fieldLabel == 'Title') {
        if(textfields[i].getValue().trim() == '') {
                    textfields[i]. markInvalid("mandatory for current choice");
            submit = false;
                }
        }
    }
    }
    return submit;
}

注意：由于您的问题没有对话框的结构，因此我假设存在一个名为./choice的选择，其值确定了文本字段的状态。