Kendo Validator always says multi-select is invalid

Question

I have a multiselect that is dynamically created and appended to a template with the following bit of code:

                   if(fieldMap[i].required == true){
                        extraString = '<div class="k-edit-label" style="margin-top: -6px;"><label for="'+fieldMap[i].fieldName+'Input">'+fieldMap[i].fieldLabel+'*</label>'+helpText+'</div>\n<div data-container-for="'+fieldMap[i].fieldName+'Input" class="k-edit-field" id="'+fieldMap[i].fieldName+'Container">\n';
                        dynamicComponent = '\t<input class="multiselect-binder" id="'+fieldMap[i].fieldName+'Input" name="'+fieldMap[i].fieldName.toLowerCase()+'" data-auto-close="false" data-role="multiselect" data-bind="value:'+fieldMap[i].fieldName.toLowerCase()+'" required data-required-msg="Please Select Valid '+fieldMap[i].fieldLabel+'" data-source="[';
                        //dynamicComponent = '\t<select id="'+fieldMap[i].fieldName+'Input" data-role="dropdownlist" data-bind="value:'+fieldMap[i].fieldName.toLowerCase()+'" required data-required-msg="Please Select Valid '+fieldMap[i].fieldLabel+'">';
                    } else{
                        extraString = '<div class="k-edit-label" style="margin-top: -6px;"><label for="'+fieldMap[i].fieldName+'Input">'+fieldMap[i].fieldLabel+'</label>'+helpText+'</div>\n<div data-container-for="'+fieldMap[i].fieldName+'Input" class="k-edit-field" id="'+fieldMap[i].fieldName+'Container">\n';
                        dynamicComponent = '\t<input class="multiselect-binder" id="'+fieldMap[i].fieldName+'Input" data-auto-close="false" data-role="multiselect" data-bind="value:'+fieldMap[i].fieldName.toLowerCase()+'" data-source="[';
                        //dynamicComponent = '\t<select id="'+fieldMap[i].fieldName+'Input" data-role="dropdownlist" data-bind="value:'+fieldMap[i].fieldName.toLowerCase()+'">';
                    }
                    optString = '';
                    for(var k = 0; k < fieldMap[i].picklistVals.length; k++){
                        if(k == 0){
                           optString += '\''+fieldMap[i].picklistVals[k]+'\'';   
                        }
                        else{
                            optString += ',\''+fieldMap[i].picklistVals[k]+'\'';   
                        }
                    }
                    //Close the input component as well as the container div
                    dynamicComponent += optString + ']"/>\n<span class="k-invalid-msg" data-for="'+fieldMap[i].fieldName.toLowerCase()+'"></span></div>\n\n';

I run a validator.validate() on save button click to determine if information should be saved or not, which is dependent on if the multi-select input is required.

This pops up the invalid tooltip message when nothing is selected just fine. The issue is, however, that it will be marked invalid even if a selection is made. I am wondering if anyone has any solutions for how to get a validator to work correctly with the multiselect. Just hiding the pop ups is not really what I am after, as the validate() function will still fail even if the pop up is hidden, and I need the validate() function to pass.

Answer 1

Maybe not the best, but here is what I got.

function Save(){
    $("#divTenureContainer .k-invalid").removeClass("k-invalid");

    var tenureChecked = $("#chkTenure").prop('checked');
    var tenureValid = Configuration_Tenure_Validator.validate();  
}

Configuration_ValidateInput = (input) => {
    var validationType = $(input).data("validation");
    var required = $(input).prop("required") || $(input).hasClass("js-required");
    if (!required) return true;

    if (validationType) {
        if (validationType === "stars") {
            return $(input).val() > "0";
        }

        if (validationType === "hashtags") {
            return ($(input).data("kendoMultiSelect").value().length > 0);
        }

        if (validationType === "required-text") {
            return $(input).val() >= "";
        }
    }

    return true;
}

var Configuration_ValidationRules = { rules: { Configuration_ValidateInput }, validationSummary: false };

var Configuration_Tenure_Validator = $("#divTenureContainer").kendoValidator(Configuration_ValidationRules).data("kendoValidator");