如何使用Knockout-Validation验证特定子项

Question

我使用Knockout- validation的sample，并添加了包含验证规则的2个子集合。

var Item = function(id, name) {
  var self = this;
  self.id = ko.observable(id).extend({required: {message: 'item id required'}});
  self.name = ko.observable(name).extend(
  {
    minLength: {message :'item name must be at least 5 characters', params: 5}, 
    maxLength: 10
  });
   
   ko.validation.group(self, { live: true }); 
};

var itemsList = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')];

var viewModel = {
    items : ko.observableArray(itemsList),
    items2: ko.observableArray(itemsList),
    firstName: ko.observable().extend({minLength: 2, maxLength: 10}),
    lastName: ko.observable().extend({required: true}),
    emailAddress: ko.observable().extend({
        // custom message
        required: {
            message: 'Please supply your email address.'
        }
    }),
    age: ko.observable().extend({min: 1, max: 100}),
    location: ko.observable()
};

使用

ko.validation.group(viewmodel, { deep: true });

我的子集合正确显示验证消息，但我只希望验证一个子集合。documentation说要传递我想要验证的项，如下所示：

ko.validation.group([viewModel.firstName, viewModel.lastName, viewModel.items]);

但是当我这样做时，子集合不再显示验证消息。

要复制，请转到上面链接的示例，然后单击提交。两个组中的项目0和项目2都将具有验证消息。变化

viewModel.errors = ko.validation.group(viewModel, {deep: true});

至

viewModel.errors = ko.validation.group([viewModel.lastName, viewModel.items]);

再次运行并单击submit。

​

​

Answer 1

创建ViewModel时：

 var itemsList = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')];
 
 var viewModel = {
     items : ko.observableArray(itemsList),
     items2: ko.observableArray(itemsList),

您在两个可观察数组中共享相同的可观察对象，即items和items2。

您可以通过添加新的可观察对象来解决它(我添加了itemsList2，然后使用它来初始化items2)：

 var itemsList = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')];
 var itemsList2 = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')]; <---
 
 var viewModel = {
     items : ko.observableArray(itemsList),
     items2: ko.observableArray(itemsList2), <---
     ...
 };

最后，您需要在下面的句子中添加{deep: true}：

viewModel.errors = ko.validation.group([viewModel.lastName, viewModel.items], {deep: true});

下面是一个fiddle示例，以及完整的ViewModel。

var Item = function(id, name) {
  var self = this;
  self.id = ko.observable(id).extend({required: {message: 'item id required'}});
  self.name = ko.observable(name).extend(
  {
    minLength: {message :'item name must be at least 5 characters', params: 5}, 
    maxLength: 10
  });
   
   ko.validation.group(self, { live: true }); 
};

var itemsList = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')];
var itemsList2 = [new Item(1, 'test'), new Item(2, 'item 2'), new Item(0, '1')];

var viewModel = {
    items : ko.observableArray(itemsList),
    items2: ko.observableArray(itemsList2),
    firstName: ko.observable().extend({minLength: 2, maxLength: 10}),
    lastName: ko.observable().extend({required: true}),
    emailAddress: ko.observable().extend({
        // custom message
        required: {
            message: 'Please supply your email address.'
        }
    }),
    age: ko.observable().extend({min: 1, max: 100}),
    location: ko.observable()
};