Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments
SOLVED

Multifield js in touch ui 6.3 required true is not preventing dialog to submit .

Avatar

Level 7

Hi Folk , 

 

I have mutlifield js which is standard multifiled js with eaem coding which is avaiable over net .

 

But required = true property only giving warning but not preventing dailog to submit . Author can have empty value for any field of mutifield and submit it . It is getting saved successfully . I have to stop submission on dailog if any field of mutifield is empty .

 

 

Code is somewhat similar to like that :

 

(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 false;
}

//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);
})();

 

 

In my case on click of add we are adding text filed rte and check box every time supoose 3 sets of this multifield avaiable then i need to check text field and rte value if taht is empty in any of one among all 3 sets then it should not submit .

 

It will be great if anyone can point out a clear code to do e.stappropgation() after checking text field and rte empty or not ..becoz there is each loop in upper js if i check also one value e.stoppropagtion stop submitting for 1st value and it wont come out of the loop .

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
1 Reply

Avatar

Correct answer by
Community Advisor