観測可能な配列によるノックアウトの検証

Question

私は、ユーザが異なるユーザを詳細に入力するシナリオを持っています。私は、各ユーザーのフィールドごとにテキストボックスを用意しています。各行のすべてのフィールドではなく、少なくとも1つのフィールドをユーザーが入力する必要がある場合は、ユーザーに詳細を保存させる必要があります。行は完全に空ではありません。ここでは私が試しているフィドルです

私はちょうど1行に1つの値を入力するように求めるユーザーに求める必要があります。すべてのフィールドを要求するのを尋ねる代わりに。 http://jsfiddle.net/KHFn8/7161/

var NameModel = function(names) { 
    var self = this; 
    self.names = ko.observableArray(names); 
    self.addName = function() { 
    self.names.push(new xyz()); 
    }; 
    self.removeName = function(name) { 
    self.names.remove(name); 
    }; 
    if (names != null) 
    self.names(names); 
}; 
var xyz = function() { 
    var self = this; 
    self.FirstName = ko.observable().extend({ 
    required: true 
    }); 
    self.MiddleName = ko.observable().extend({ 
    required: true 
    }); 
    self.LastName = ko.observable().extend({ 
    required: true 
    }); 
    self.Gender = ko.observable().extend({ 
    required: true 
    }); 
    self.NameSuffix = ko.observable().extend({ 
    required: true 
    }); 
}; 
ko.validation.init({ 
    grouping: { deep: true, observable: true, live: true }, 
    messagesOnModified: false 
}); 
ViewModel = function() {  
    this.nameModel = new NameModel(); 
    this.save = function() { 
    if (
    this.errors().length == 0) 
      alert('Everything is valid, we can save!'); 
     else if (
     !this.nameModel.isValid()) 
      alert('You must have at least one valid item '); 
    } 
    }; 
ko.applyBindings(new ViewModel()); 


<div data-bind="with: nameModel" class="panel-body"> 
    <table class="table table-hover table-responsive"> 
    <thead> 
     <tr> 
     <th>FirstName</th> 
     <th>MiddleName</th> 
     <th>LastName</th> 
     <th>Gender</th> 
     <th>NameSuffix</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: names"> 
     <tr> 
     <td> 
      <input class="form-control" data-bind="value: FirstName" /> 
     </td> 
     <td> 
      <input class="form-control" data-bind="value: MiddleName" /> 
     </td> 
     <td> 
      <input class="form-control" data-bind="value: LastName" /> 
     </td> 
     <td> 
      <input class="form-control" data-bind="value: Gender" /> 
     </td> 
     <td> 
      <input class="form-control" data-bind="value: NameSuffix" /> 
     </td> 
     <td style="vertical-align: inherit;"><a href="#" data-bind="click:$parent.removeName.bind($data)">Delete</a></td> 
     </tr> 
    </tbody> 
    </table> 
    <button class="btn btn-success btn-sm" data-bind="click: addName.bind($data)">Add Name</button> 
</div> 
<button id="saveButton" type="button" class="btn btn-primary btn-company pull-left" data-bind="click: save"> 
    Save 
    <span class="glyphicon glyphicon-download-alt"> </span> 
</button> 

Answer 1

ここではいくつかのユーザー参加型KO-検証ルールがあります。

https://github.com/Knockout-Contrib/Knockout-Validation/wiki/User-Contributed-Rules

これは、あなたがやりたいだろう「のいずれかが必要です」のルールが含まれています。しかし、そのページの最新バージョンがちょっとバグがあることがわかったので、もう少し前のプロジェクトのバージョンを使って、それをあなたのフィドルに適用しました。結果はここにある：

http://jsfiddle.net/4f8s93k4/1/

プラグインはJSの最上部にあり、次のようになります。

ko.validation.rules['requiresOneOf'] = { 
    getValue: function (o) { 
     return (typeof o === 'function' ? o() : o); 
    }, 
    validator: function (val, fields) { 
     var self = this; 
     var result = false; 
     ko.utils.arrayForEach(fields, function (field) { 
      var val = self.getValue(field); 
      if (val) { 
       result = true; 
      } 
     }); 

     return result; 
    }, 
    message: 'You must fill in at least one of these fields' 
}; 

ではなく、あなたの観測の一人一人にそれを適用し、私が使用してそれを適用しましたこれは、このようなあなたのHTMLに表示されます

self.requiresOneValidation = ko.observable().extend({ 
    requiresOneOf: [self.FirstName, self.MiddleName, self.LastName, self.Gender, self.NameSuffix] 
}) 

：シングル検証メッセージ、コードだけを少し減らすために

<tr> 
     <td colspan="6"> 
     <span data-bind="validationMessage: requiresOneValidation"></span> 
     </td> 
    </tr>