Knockout-validation not displaying error message for select multiple

Question

I set up a page with the knockout validation plugin for validating user input. I have two elements: one is a regular select and the other is select with multiple set. The idea is to make both elements are required.

The validation call is firing, but the problem is that the error message for the select multiple is not displaying.

Here is my js code:

  ko.validation.init();

    function isNotUndefined(val) {
        return (typeof val != "undefined");
    }

    function isArrayNotEmpty(val) {
        return (val.length > 0);
    }

    var viewModel = function () {
        var self = this;

        self.memberType = ko.observable().extend({
            validation: {validator: isNotUndefined, message:'Please select gender'}
        });
        self.seekingTypes = ko.observableArray().extend({
            validation: {validator: isArrayNotEmpty, message:'At least one option is required'}
        });
        self.memberTypeSource = [
            { id: 1, text: 'Man' },
            { id: 2, text: 'Woman' }
        ];
        self.errors = ko.validation.group(self);
        self.doValidation = function () {
            console.log('error count=' + self.errors().length);
            if (self.errors().length == 0) {
                console.log('Yay.');
            } else {
                self.errors.showAllMessages(true);
            }
        };

        return {
            memberType: self.memberType,
            seekingTypes: self.seekingTypes,
            memberTypeSource: self.memberTypeSource,
            errors: self.errors,
            doValidation: self.doValidation,

        }
    };

    addEventListener('load', function () {
        ko.applyBindings(viewModel);
    });

And this is the html:

Gender: <select data-bind="value: memberType,
                    options: memberTypeSource,
                    optionsText: 'text',
                    optionsValue: 'id',
                    optionsCaption: 'Please select'"></select>
<br />
Seeking: <select data-bind="selectedOptions: seekingTypes,
                    options: memberTypeSource,
                    optionsText: 'text',
                    optionsValue: 'id'"
                 multiple></select>
<br />

<button type="button" data-bind='click: doValidation'>Submit</button>

I've also tested the validation with input text element, the error message is displayed fine.

Any help is greatly appreciated.

Answer 1

The validation plugin only amends the value and checked binding to make them automatically "validation" compatible.

So the selectedOptions is not automatically validated so you need to call makeBindingHandlerValidatable with the selectedOptions before the ko.applyBindings to make the validation work with your multi select:

ko.validation.makeBindingHandlerValidatable('selectedOptions');
ko.applyBindings(new viewModel);

Demo JSFiddle.

As an alternative solution you can also you the validationCore (or the validationMessage binding on separate span) on your select:

<select data-bind="selectedOptions: seekingTypes,
                    options: memberTypeSource,
                    optionsText: 'text',
                    optionsValue: 'id', validationCore: seekingTypes" 
                    multiple></select>

Demo JSFiddle.