【问题标题】:Knockout Validation - Custom Validator not showing message淘汰赛验证 - 自定义验证器不显示消息
【发布时间】:2014-02-21 18:33:22
【问题描述】:

我的视图模型中有布尔属性,每个属性都与一个复选框相关联。我正在尝试编写一个自定义剔除验证器,以确保至少选中一个复选框。我已经编写并连接了验证器(即,它在复选框更改时触发,并且仅在未选中任何复选框时返回 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,但是应该显示我的验证消息的跨度不显示任何内容。我假设我错过了一个步骤或一些简单的东西,但我找不到它。认为我一直盯着代码太久了。任何帮助将不胜感激,谢谢。

更新:不过,我注意到,如果我将自定义验证器添加到验证组,就会发现它无效。我已经更新了小提琴来说明这一点。所以我的验证器正在工作,我只是无法显示该死的消息。

http://jsfiddle.net/internetH3ro/aRS4a/

【问题讨论】:

    标签: knockout.js knockout-validation


    【解决方案1】:

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

    即使它的最新版本已经使用了一年多,并且充满了bug,所以请使用github的最新版本,直到cdnjs版本不更新为止。

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

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

    演示JSFiddle.

    您需要这样做,因为您的 observable self.customValidation 从未真正更新,它仅提供验证器,但插件仅在您的底层 observable 已被修改时才显示错误消息,除非您有 messagesOnModified: false 设置。

    【讨论】:

    • 太好了,谢谢!我只使用 CDN 版本的小提琴,但我使用的是 Nuget 版本的插件。我切换到你链接的那个,它现在工作得很好。谢谢! :)
    • nuget 版本和 CDNjs 版本一样老旧,所以你真的应该使用 github 版本。希望 2.0 版发布时,nuget 和 CDNjs 都会更新。
    猜你喜欢
    • 2013-07-01
    • 2013-05-28
    • 2014-12-04
    • 1970-01-01
    • 2017-09-26
    • 2012-09-05
    • 2015-01-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多