Convalida knockout non visualizzato messaggio di errore per selezionare più

Question

Ho impostato una pagina con il plugin di convalida a eliminazione diretta per la convalida dell'input dell'utente. Ho due elementi: uno è un normale select e l'altro è select con il set multiple. L'idea è di rendere necessari entrambi gli elementi.

La chiamata di convalida è in corso, ma il problema è che il messaggio di errore per il multiplo selezionato non viene visualizzato.

Ecco il mio codice 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); 
    }); 

e questo è l'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> 

Ho anche provato la convalida con elemento di testo di input, il messaggio di errore viene visualizzato bene.

Qualsiasi aiuto è molto apprezzato.

Answer 1

Il plug-in di convalida modifica solo il binding value e checked per renderli automaticamente "di convalida" compatibili.

Così il selectedOptions non viene convalidato automaticamente quindi è necessario chiamare makeBindingHandlerValidatable con la selectedOptions prima che il ko.applyBindings per rendere il lavoro di convalida con il vostro multi selezionare:

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

Demo JSFiddle.

Come soluzione alternativa è possibile anche la validationCore (o il validationMessage binding sulla durata separato) sul vostro prescelto:

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

Demo JSFiddle.