敲除可观察数组验证的问题答案

【问题标题】：Issues with knockout observable array validation敲除可观察数组验证的问题
【发布时间】：2013-04-05 08:53:46
【问题描述】：

我对 observablearray 元素的验证规则有疑问。我正在使用自定义消息模板来显示错误，问题是当错误出现时它不会显示，但是，我可以在相关字段中看到“*”。以下是我的模型：

function ViewModel(item) {
var parse = JSON.parse(item.d);
var self = this;
this.ID = ko.observable(parse.ID).extend({ required: { params: true, message: "ID is required" }});
this.Name = ko.observable(parse.Name);
this.WeeklyData = ko.observableArray([]);
var records = $.map(parse.WeeklyData, function (data) { return new Data(data) });
this.WeeklyData(records);
}

var Data = function (data) {
this.Val = ko.observable(data).extend({
    min: { params: 0, message: "Invalid Minimum Value" },
    max: { params: 168, message: "Invalid Maximum Value" }   
});

这是我正在使用的验证配置：

    // enable validation
    ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: false,
    insertMessages: true,
    parseInputAttributes: false,
    messageTemplate: "customMessageTemplate",
    grouping: { deep: true }
    });
    ko.validation.init();

我的任何自定义消息模板都是这样的：

   <script id="customMessageTemplate" type="text/html">
      <em class="errorMsg" data-bind='visible: !field.isValid()'>*</em>
   </script>

   <ul data-bind="foreach: Errors">
     <li class="errorMsg" data-bind="text: $data"></li>
   </ul>

使用此实现，我在自定义模板中看不到验证消息。但是如果我删除配置 deep: true，它不会验证 observable 数组元素，而是另一个 observable(ID)，然后消息会正确显示。

我对此感到非常困惑并且有点卡住，如果有人可以提供帮助，我将不胜感激/

提前致谢。

【问题讨论】：

标签： validation knockout.js ko.observablearray

【解决方案1】：

我从您的问题中了解到，您正在尝试验证您的 observableArray 条目，因此如果您的 WeeklyData observableArray 中的任何条目不符合以下条件：

arrayEntry % 15 === 0

你想显示错误信息。如果是这种情况，那么以下自定义验证器可以为您完成这项工作：

var fminIncrements = function (valueArray) {
  var check = true;    
  ko.utils.arrayFirst(valueArray, function(value){
        if(parseInt(value, 10) % 15 !== 0)
        {
          check = false;
          return true;
        }
     }); 
  return check;
};

并且你必须在 observableArray 上应用这个验证器（不需要对数组的单个条目设置验证）。此验证器将数组作为输入并验证其每个条目，如果任何一个条目验证失败，它将返回 false，然后您将看到错误消息。

您的视图模型如下所示：

function viewModel() { 
    var self = this;

    self.WeeklyData = ko.observableArray([
      15, 
      40
    ]).extend({ 
        validation: {
          validator: fminIncrements,
          message: "use 15 min increments" 
        }
    });


    self.errors = ko.validation.group(self);
}

这里是working fiddle。

【讨论】：

嗨 Gaurav，谢谢我检查了它，但是当您在运行时更改可观察值时验证不起作用（我删除了您小提琴中的只读属性）。无论如何让它工作？谢谢:)
顺便说一句，您给出的解决方案正是我想要的，只是在更新可观察对象时它不起作用。
你能发布它不工作的场景的小提琴吗？顺便说一句，当您更改可观察数组时，不仅仅是验证有效！
jsbin.com/ocizes/19/edit - 这是我使用的小提琴。我只是删除了文本框的只读属性，并尝试在文本框本身中编辑值。是的，当然，当我在代码中更改 observablearray 中的值时，它会起作用！为什么我在运行时更改值时不会发生这种情况？
我想我找到了问题：messagesOnModified: false，应该设置为true。

【解决方案2】：

单个项目未显示消息 - 它仅在摘要中 - 您如何在单个文本框上指定消息？

【讨论】：