Knockout Validation - 自定义验证器未显示信息

Question

Knockout Validation - 自定义验证器未显示信息

3

我在我的视图模型中有布尔属性，每个属性都与一个复选框相关联。我试图编写一个自定义的knockout验证器，以确保至少有一个复选框被选中。我已经编写并连接了验证器（即当复选框更改时触发，且仅在未选中任何复选框时返回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，但应显示验证消息的span却没有显示任何内容。我觉得我可能漏掉了一些步骤或者有简单的错误，但我找不到。我想我对这段代码看得太久了。如果有帮助，将不胜感激，谢谢。

更新：我注意到，如果将自定义验证器添加到验证组中，就可以检测到它无效的事实。我已更新fiddle以说明这一点。所以我的验证器有效，只是无法显示该死的消息。 http://jsfiddle.net/internetH3ro/aRS4a/

- James McConnell

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nemesv · Accepted Answer

请不要使用来自cdnjs的验证插件！

即使它的最新版本已经超过一年了，而且充满了错误，所以在cdnjs版本更新之前，请使用github上的最新版本。

在您更新到最新版本的验证插件后，您只需要在验证配置中设置messagesOnModified: false。

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: false,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

演示 JSFiddle。

你需要这样做，因为你的可观察对象 self.customValidation 从未得到实际更新，它只提供验证器，但插件仅在基础可观察对象被修改时显示错误消息，除非你有 messagesOnModified: false 设置。