I have dropdown with value 2,3 and 4 and based on select need to add multifields. I have used js for validation and its working but when i save dialog and reopen and change the dropdown value its saving dialog and validation message is not showing.

[DPrakashRaj]

Do you want to say that validation works only fir the first time you edit the component and after that?

[ashar02]

@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

[DPrakashRaj]

What the js logic to achieve this? Are you using multifield min/max property to achieve this?

[ashar02]

@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))

[DPrakashRaj]

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

[ashar02]

@DPrakashRaj But code is not working using this logic can you check in your system.

[Abhishekty]

@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

}

[ashar02]

@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))

[Abhishekty]

@ashar02 

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);

   }

}