KnockoutJS 验证插件不显示错误消息答案

【问题标题】：KnockoutJS Validation plugin doesn't show error messageKnockoutJS 验证插件不显示错误消息
【发布时间】：2012-08-09 10:36:57
【问题描述】：

我尝试使用 KnockoutJs validation plugin，但我遇到了问题。在从输入发布数据之前，我验证值，如果它正确，我发布它并将我的视图模型重置为默认状态，如果值不正确，我通过添加一些 css 类将输入包装到红色边框中（或添加错误消息）。问题是这只工作一次：在发布数据后我将我的视图模型重置为默认状态（正如我之前所说），输入字段变为空，如果我尝试发布这个空数据，验证有效，但 css 类没有t 应用（不出现错误消息）。请试试我的Fiddle example，怎么了？

* [更新]。

所以，我找到了解决方法：只需在 data-bind 属性中添加额外的代码

validationElement: itemToAdd().Name

应该是

<input data-bind='value: itemToAdd().Name, validationElement: itemToAdd().Name' />

它有效，但看起来很糟糕。无论如何，如果有人可以修复我以前的代码，那就太好了。

【问题讨论】：

标签： knockout.js knockout-validation

【解决方案1】：

改变一下

var t = ko.validation.group(viewModel.itemToAdd())

到

var t = ko.validation.group(viewModel.itemToAdd)

【讨论】：

但是在这种情况下，点击按钮后输入字段中的值不会被清除。

【解决方案2】：

我整理了一个fiddle 来举例说明我的答案。

解决此问题的一种方法是让您的activeAccount 对象有一个属性，我称之为errors，它将保存该对象的所有验证消息。

var activeAccount = function(data) {
    this.Id = ko.observable(data.id);
    this.Name = ko.observable(data.name).extend({ required: { message: 'Enter account name.'} });
    this.UserId = ko.observable(1);
    this.errors = ko.validation.group(this);
};

var viewModel = {
    items: ko.observableArray([]), 
    itemToAdd: ko.observable(new activeAccount({})),
    createItem: function (item) {
        if (item.errors().length == 0) {
            viewModel.items.push(item);
            viewModel.itemToAdd(new activeAccount({}));
        } else {
            item.errors.showAllMessages();
        }
    }
};

一旦您保存了项目（无论是发布到服务器、推送到 observableArray 还是两者），然后通过将空对象传递给构造函数将其设置为 new activeAccount({}) 来“重置”itemToAdd。

【讨论】：