Knockout-Validierung zeigt keine Fehlermeldung für mehrere Werte an

Question

Ich habe eine Seite mit dem Knockout-Validierungs-Plugin für die Validierung von Benutzereingaben eingerichtet. Ich habe zwei Elemente: eines ist ein reguläres select und das andere ist select mit multiple gesetzt. Die Idee ist, dass beide Elemente benötigt werden.

Der Validierungsaufruf wird ausgelöst, aber das Problem besteht darin, dass die Fehlermeldung für das ausgewählte Multiple nicht angezeigt wird.

Hier mein js-Code ist:

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

Und dies ist der 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> 

Ich habe auch die Validierung mit Eingabetextelement getestet, wird die Fehlermeldung in Ordnung angezeigt.

Jede Hilfe wird sehr geschätzt.

Answer 1

Das Validierungs-Plugin ändert nur die value und checked Bindung, um sie automatisch "Validierung" kompatibel zu machen.

So ist die selectedOptions nicht automatisch validiert, so dass Sie makeBindingHandlerValidatable mit dem selectedOptions vor dem ko.applyBindings aufrufen müssen die Validierungsarbeiten mit Ihrem Multi zu machen wählen:

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

Demo JSFiddle.

Als alternative Lösung können Sie auch die Sie validationCore (oder die validationMessage binding auf separaten Bereich) auf dem select:

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

Demo JSFiddle.