下拉列表上的敲除验证始终显示错误消息(Knockout Validation on drop down list always displaying error message)

下拉列表上的敲除验证始终显示错误消息(Knockout Validation on drop down list always displaying error message)

将值绑定到下拉列表并使用敲除验证时，即使我的敲除验证设置说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/

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

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

When binding values to a drop down list and using knockout validation, the error message seems to always display even if my knockout validation 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 drop down list: http://jsfiddle.net/f7v4m/

The text box is displaying the correct behavior, where the error message will only display after the value has been modified.

Why is the error message displaying for the drop down list?

最满意答案

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

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

演示JSFiddle 。

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

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

To remove the "initlial" validation message you need to initialize your State property with an empty string:

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

Demo JSFiddle.

You need to do this because when writing ko.observable() it will be initialized with undefined however when knockout evaluates the value binding it sets State to the currently selected empty option value's which is an empty string.

However undefined is not equal to the empty string it makes your property "dirty" and it triggers the validation message because the validation plugin thinks that your property has been modified.