【问题标题】:Dynamic Knockout Validation not showing error message动态淘汰验证不显示错误消息
【发布时间】:2014-08-22 10:23:00
【问题描述】:

我的视图模型上有一个属性,它只需要在特定条件下进行验证。

从某种意义上说,它工作正常,当我检查控制台的 viewModel.errors() 时,它向我显示了那里的错误,但是该消息从未出现在页面上。如果我一开始就扩展我的可观察对象,它就可以工作,但是如果我删除验证并将其放回原处,它将不再在页面上显示错误消息。

在下面的示例中,如果您加载代码/jsfiddle,请单击“启用必需”按钮,然后单击“显示错误”,您将看到它正确抛出错误但不会显示错误消息。我已经尝试过使用和不使用 customMessageTemplate(不过我的实时工具使用 customMessageTemplate)。

这个 jsfiddle 做的一件事是我的实时工具在尝试禁用所需状态时不会抛出错误,不太清楚为什么会这样做。 self.errors 字段并没有填充错误,而是填充了我的任何其他验证模型中都没有的函数。

下面的代码和我的实时构建之间的唯一主要区别是使用 ko.computed 属性来更新我的 self.features 是否需要验证,而不是使用函数,但最终结果是相同的。

这是我的问题的jsfiddle。

这是代码:

<div id='container'>
    <select data-bind="value: feature, options: features, optionsCaption: 'Select'"></select>

    <br/>

    <button data-bind='click: attachRequired'>Enable Required</button>
    <button data-bind='click: removeRequired'>Disable Required</button>
    <button data-bind='click: showMessages'>Show errors</button>

</div>

<script id="customMessageTemplate" type="text/html">
    <em class="customMessage" data-bind='validationMessage: field'></em>
</script>

ko.validation.configure({
    //decorateElement: true,
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: 'customMessageTemplate'
});


function viewModel(){
    var self = this;

     self.errors = ko.validation.group(self, {
        deep: false,
        observable: false
    });

    self.feature = ko.observable();
    self.feature.subscribe(function () {
        alert(self.feature());
    })
    self.features = ["test1", "test2", "test3"];

    self.attachRequired = function () {
        self.feature.extend({
            required: {
                message: 'please select a feature'
            }
        })  
    };

    self.removeRequired = function () {
        self.feature.extend({ validatable: false });
    };

    self.showMessages = function () {
        self.errors.showAllMessages();
        alert(self.errors().length ? "error" : "no errors");
    };
}


var model = new viewModel();

ko.applyBindings(model);

【问题讨论】:

    标签: validation knockout.js knockout-validation


    【解决方案1】:

    嗯.. 尝试了 2 小时后,我决定发表这篇文章......当然,在提交它 5 分钟后,我最终弄明白了......

    请记住尝试启用/禁用验证应该可以工作,我还没有完全弄清楚为什么该消息没有显示。但不管有没有更简单和优雅的解决方案:

    由于我的验证是基于另一个属性是否有值,我可以使用 ko 验证的onlyIf 选项:

    self.feature = ko.observable().extend({
        required: {
            message: 'please select a feature',
            onlyIf: function () {
                return self.propertyToCheckFor() == true;
            }
        }
    });
    

    如果在可观察对象上完成检查并且验证错误消息显示得很好,这将启用/禁用动态验证!

    【讨论】:

    • 即使在 2015 年进行到一半时,ko 验证仍然有一半损坏,只有在他们喜欢时才会弹出消息。
    猜你喜欢
    • 2012-08-19
    • 2017-09-26
    • 1970-01-01
    • 2013-05-28
    • 2014-02-11
    • 2020-04-22
    • 2014-12-04
    • 2014-04-19
    • 2014-02-21
    相关资源
    最近更新 更多