Javascript 基于用户选择在CQ5对话框中向多字段动态添加验证
我需要根据选择字段的值将多字段的标题设置为必填项。这就是我的多字段的样子Javascript 基于用户选择在CQ5对话框中向多字段动态添加验证,javascript,extjs,aem,Javascript,Extjs,Aem,我需要根据选择字段的值将多字段的标题设置为必填项。这就是我的多字段的样子 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:nul
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);
如何将正确的文本字段（每个多字段条目中的标题字段）设置为无效。这不起作用，因为您总是检查第一个文本字段的值并将其标记为无效。相反，您必须遍历所有文本字段，检查所需的文本字段，并适当地将它们标记为无效。侦听器应该是这样的
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;
}
功能（dlg）{
var choice=dlg.getField（'./choice'）.getValue（）；
var submit=true；
var multi=dlg.findByType（'multifield'）[0]；
如果（选项==2）{
var textfields=multi.findByType（'textfield'）；
对于（变量i=0；i/choicefunction(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;
}