Knockout.js 对隐藏字段的验证答案

【问题标题】：Knockout.js validation on hidden fieldsKnockout.js 对隐藏字段的验证
【发布时间】：2015-10-22 11:47:06
【问题描述】：

我正在为我的表单实施剔除验证，并且我希望仅在显示时才设置一个必填字段。根据表单中其他字段的选择，某些控件可能会被可见性隐藏：隐藏或显示：无。我怎样才能使这些字段仅在显示时才需要？这个我试过了

var name = ko.observable().extend({
        required: {
            onlyIf: function () {
                return ($('#name').is(':visible'));
            },
            message: '*** Required'
        }
    });

但它似乎不起作用，我不确定它是否应该（你能在 knout onlyIf 参数中编写这样的自定义逻辑吗？）。

感谢您的帮助。

【问题讨论】：

一种方法是你应该基于 viewModel 中的 observable 设置可见性 self.nameVisible=ko.observbale() to true/false 稍后你可以在 .extend 和 onlyIf 中使用相同的 observable。保持动态性
我想我没有提供足够的信息。我的字段实际上是根据在页面加载时从数据库中提取的信息以及其他控件的选择来显示/隐藏的。尽管如此，您的评论向我展示了如何处理它并且我能够解决。如果您想将此作为答案，我很乐意选择它。
想添加一个小提琴，但你得到了一个工作的。添加为答案，帮助自己。欢呼

标签： javascript jquery knockout.js

【解决方案1】：

正如cmets中提到的，你需要做的就是

在 ViewModel 中声明一个 observable，例如 self.nameVisible=ko.observbale() 从任何地方（从 DB 或基于其他控件选择）设置它的值 True/False。稍后您应该在验证中使用self.nameVisible()，即使用.extend 和onlyIf 组合来使事情（隐藏/显示元素+动态条件验证）工作。

HTML：

<input type="text" data-bind="value:name,visible:nameVisible"/>

视图模型：

var ViewModel = function () {
    var self = this;
    self.nameVisible = ko.observable(true); //Set it dynamically 
    self.name = ko.observable().extend({
        required: {
            message: '*** Required',
            onlyIf: self.nameVisible
        }
    });
};
ko.applyBindings(new viewModel());

【讨论】：