下拉列表上的淘汰赛验证始终显示错误消息

Question

将值绑定到下拉列表并使用剔除验证时，即使我的剔除验证设置显示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 进行初始化，但是当敲除评估value 绑定时，它将State 设置为当前选择的空选项值，这是一个空字符串。

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