我在我的viewmodel中有布尔属性,每个属性都绑定一个复选框。我正在尝试编写一个自定义的淘汰验证器,确保至少选中一个复选框。我已经编写并连接了验证器(即,当复选框发生更改时会触发,并且仅在未选中复选框时返回false),但验证消息未显示。
首先,这是一个小提琴:http://jsfiddle.net/internetH3ro/aRS4a/10/
这是验证器:
ko.validation.rules['requiresOneOf'] = {
getValue: function (o) {
return (typeof o === 'function' ? o() : o);
},
validator: function (val, fields) {
var self = this;
var result = true;
ko.utils.arrayForEach(fields, function (field) {
var val = self.getValue(field);
if (val) {
result = false;
}
});
return result;
},
message: 'Must select one option'
};
ko.validation.registerExtenders();
这是视图模型(名称已更改以保护无辜者):
function ViewModel() {
var self = this;
self.checkboxOne = ko.observable(true);
self.checkboxTwo = ko.observable(true);
self.checkboxThree = ko.observable(true);
self.checkboxFour = ko.observable(true);
self.customValidation = ko.observable().extend({
requiresOneOf: [self.checkboxOne, self.checkboxTwo, self.checkboxThree, self.checkboxFour]
});
}
以及相关的HTML:
<label>
<input type="checkbox" data-bind="checked: checkboxOne" />Checkbox One
</label><br />
<label>
<input type="checkbox" data-bind="checked: checkboxTwo" />Checkbox Two
</label><br />
<label>
<input type="checkbox" data-bind="checked: checkboxThree" />Checkbox Three
</label><br />
<label>
<input type="checkbox" data-bind="checked: checkboxFour" />Checkbox Four
</label>
<span data-bind="validationMessage: customValidation"></span>
我已经通过验证程序并确认当没有选中复选框时,它会返回false,但应显示我的验证消息的范围不会显示任何内容。我假设我错过了一步或简单的事情,但我找不到它。我想我一直盯着代码太久了。非常感谢任何帮助,谢谢。
更新:我注意到,如果我将自定义验证器添加到验证组,那就会发现它无效。我已经更新了小提琴来说明这一点。所以我的验证器正在工作,我只是无法显示该消息。
答案 0 :(得分:6)
请不要使用cdnjs的验证插件!
即使它的最新版本已超过一年,并且它充满了错误,因此请使用github中的最新版本,直到cdnjs版本未更新。
在您将验证插件更新为最新版本之后,您只需在验证配置中设置messagesOnModified: false
。
ko.validation.configure({
registerExtenders: true,
messagesOnModified: false,
insertMessages: true,
parseInputAttributes: true,
messageTemplate: null
});
演示JSFiddle。
您需要执行此操作,因为您的observable self.customValidation
永远不会实际更新它只提供验证器,但如果您的基础observable已被修改,则插件仅显示错误消息,除非您具有messagesOnModified: false
设置