Checking the drop-down list in the drop-down list always displays an error message

Question

When binding values ​​to a drop-down list and using knockout verification, an error message is always displayed even if my knockout verification settings say 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);

And jsfiddle to show the difference between the text box and the dropdown: http://jsfiddle.net/f7v4m/

The text box displays the correct behavior when the error message is displayed only after the value has been changed.

Why is an error message displayed for a drop down list?

Answer 1

"initlial", State :

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

JSFiddle.

, ko.observable() undefined, , value, State , .

undefined , "", , , .