javascript - knockout validation 不显示选择多个的错误消息

Question

我用 knockout 验证插件设置了一个页面来验证用户输入。我有两个元素:一个是常规的 select，另一个是设置了 multiple 的 select。这个想法是使这两个元素都是必需的。

验证调用正在触发，但问题是未显示选择多个的错误消息。

这是我的js代码:

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

这是 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>

我还测试了输入文本元素的验证，错误消息显示正常。

非常感谢任何帮助。

Answer 1

验证插件只修改value和 checked绑定(bind)使它们自动“验证”兼容。

所以 selectedOptions不会自动验证，因此您需要调用 makeBindingHandlerValidatable与 selectedOptions在 ko.applyBindings 之前使验证与您的多选一起工作:

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

演示 JSFiddle .

作为替代解决方案，您还可以使用 validationCore (或单独跨度上的 validationMessage binding)在您的选择上:

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

演示 JSFiddle .