Views
Replies
Total Likes
Do you want to say that validation works only fir the first time you edit the component and after that?
@DPrakashRaj Validation works when dropdown value 2 is selected and 2 multifields are saved and when reopen the dialog and dropdown value 3 is selected then validation is not working and 2 multifields are saving
What the js logic to achieve this? Are you using multifield min/max property to achieve this?
@DPrakashRaj this is logic i am using
(function ($, $document) {
"use strict";
var COUNT_SELECT = "./variation";
var maxCount;
$document.on("dialog-ready", addSelectListener);
function addSelectListener(){
$countSelect = $("coral-select[name='" + COUNT_SELECT + "']");
countSelect = $countSelect[0];
countSelect.on("change", adjustMultifieldItems);
}
function adjustMultifieldItems(event){
var countSelect = event.target;
maxCount = parseInt(countSelect.value);
}
$.validator.register("foundation.validation.validator", {
selector: "coral-multifield",
validate: function(el) {
var totalPanels = el["0"].items.getAll().length;
if(totalPanels > maxCount) {
return "Maximum numbers of items allowed are: " + maxCount;
}
}});
})($, $(document))
I believe you only have logic to check if items in multifield is greater than the value selected on drop-down field and in your case when you move from 2 to 3 option in drop-down items in multifield is less than the drop-down value so it’s not showing the error message.
if(totalPanels > maxCount) {
return "Maximum numbers of items allowed are: " + maxCount;
if your requirement is to have exact number of item in multifield you can go with equal operation
@DPrakashRaj But code is not working using this logic can you check in your system.
@ashar02 are you getting any error or warning in console when you are reopening the dialog and dropdown value 3 is selected ?
For better understanding you can add the else part in your logic and in that you can return & print both the variable then you will able to identify what exactly issues based on that you can update the guards.
EX:
if(totalPanels > maxCount) {
return "Maximum numbers of items allowed are: " + maxCount;
} else {
//todo
}
@Abhishekty It giving an error Uncaught ReferenceError: $countSelect is not defined.
(function ($, $document) {
"use strict";
var COUNT_SELECT = "./variation";
var maxCount;
var countSelect;
$document.on("dialog-ready", addSelectListener);
function addSelectListener(){
$countSelect = $("coral-select[name='" + COUNT_SELECT + "']");
countSelect = $countSelect[0];
countSelect.on("change", adjustMultifieldItems);
}
function adjustMultifieldItems(event){
if (event && event.target) {
countSelect = event.target;
}
maxCount = parseInt(countSelect.value);
}
$.validator.register("foundation.validation.validator", {
selector: "coral-multifield",
validate: function(el) {
var totalPanels = el["0"].items.getAll().length;
if(totalPanels > maxCount) {
return "Maximum numbers of items allowed are: " + maxCount;
}else{
return "Minimum numbers of items allowed are: " + maxCount;
}
}});
})($, $(document))
Are you getting this on page load or when you are selecting from drop down ?
Also you can declare this variable and put a guards, like:
function addSelectListener(){
var $countSelect = $("coral-select[name='" + COUNT_SELECT + "']");
if ($countSelect && $countSelect.length >= 0) {
countSelect = $countSelect[0];
countSelect.on("change", adjustMultifieldItems);
}
}
Views
Likes
Replies