javascript - 下拉列表上的 knockout validation 始终显示错误消息

Question

当将值绑定(bind)到下拉列表并使用 knockout validation 时，错误消息似乎总是显示，即使我的 knockout validation 设置为 messagesOnModified: true。

HTML

<input type="text" data-bind="value: Name" />
<br />
<select data-bind="value: State">
    <option value="">Select a state...</option>
    <option value="NY">New York</option>
    <option value="NJ">New Jersey</option>
</select>

JS

var ViewModel = function () {
     var self = this;

    self.Name = ko.observable().extend({
        required: { message: "You must enter a name." }
    });
    self.State = ko.observable().extend({
        required: { message: "You must select a state." }
    });

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

ko.validation.configure({
    messagesOnModified: true,
    insertMessages: true
});

ko.applyBindings(new ViewModel(), document.body);

用jsfiddle显示文本框和下拉列表的区别:http://jsfiddle.net/f7v4m/

文本框显示了正确的行为，其中错误消息只会在值被修改后显示。

为什么显示下拉列表的错误消息？

Answer 1

要删除“初始”验证消息，您需要使用空字符串初始化您的 State 属性:

self.State = ko.observable("").extend({
    required: { message: "You must select a state." }
});

演示 JSFiddle .

您需要这样做，因为在编写 ko.observable() 时，它将使用 undefined 进行初始化，但是当 knockout 评估 value 绑定(bind)时它将 State 设置为当前选择的空选项值，这是一个空字符串。

但是 undefined 不等于空字符串，它会使您的属性“变脏”并触发验证消息，因为验证插件认为您的属性已被修改。