Question

我有一个用户向不同用户输入详细信息的场景。我为每个用户提供了不同字段的文本框。如果用户必须填写至少一个字段而不是每行的所有字段，我需要让用户保存详细信息。没有行应该是完全空的。这是我正在尝试的小提琴

在保存时我只需要让用户每行只输入一个值。而不是要求所有需要的字段。 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'
};

我没有将它应用于你的每个observable，而是使用一条验证消息来应用它，只是为了减少代码：

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

然后会出现在您的HTML中：

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

使用可观察数组

1 个答案: