淘汰赛验证 - 至少一个字段有一个值，并且至少选中了一个复选框

Question

我正在尝试使用敲除验证插件进行一些非常简单的验证。我想验证是否至少一个文本字段有文本并且至少有一个复选框被选中。所有绑定都正常工作，到目前为止，淘汰赛本身很棒。我已经测试了本机验证规则，它们与消息传递一起使用。我只是无法让验证适用于这两条规则。

我意识到我可以很容易地使用 jQuery 检查空值，但我真的很想使用敲除。

模型（没有验证，因为我还没有找到任何可行的方法）：

var SearchForm = function(collections) {

    // main search fields
    this.fullRecord = ko.observable();
    this.title = ko.observable();
    this.author = ko.observable();

    // collections to search
    var sources = [];
    $.each(collections, function(index,collection) {
        sources.push(new Source(collection));
    });

    this.sources = ko.observableArray(sources);

    // Error handling vars
    this.errors = ko.validation.group(this);

};

var Source = function(collection) {
    $.extend(this,collection);
    this.id = "collection-"+this.code;
    this.selected = ko.observable(true);
};

在这里，我只是根据来自服务器的集合数据创建源对象列表。该数据无关紧要，因为我只关心可观察的“选定”属性。

标记：

<div id="advanced-controls" class="row">
    <div class="col-sm-8">
        <fieldset id="search-fields">
            <div class="form-group">
                <label for="fullrecord" class="control-label">Keywords:</label>
                <input type="text" id="fullrecord" class="form-control" name="fullrecord"  placeholder="Full Record Search" data-bind="value:fullRecord" />
            </div>
            <div class="form-group">
                <label for="title" class="control-label">Title:</label>
                <input type="text" id="title" name="title" class="form-control" data-bind="value:title"/>
            </div>
            <div class="form-group">
                <label for="author" class="control-label">Author:</label>
                <input type="text" id="author" name="author" class="form-control" data-bind="value:author"/>
            </div>
            <div class="form-group">
                <button id="advanced-search-submit" class="btn btn-primary" data-bind="click:search">Search</button>
                <button id="advanced-search-reset" class="btn" data-bind="click: clear">Clear All</button>
            </div>
        </fieldset>
    </div>
    <div class="col-sm-4">
        <fieldset data-bind="foreach: sources">
            <div class="form-group">
                <input type="checkbox" name="collections" data-bind="attr:{ id:id, value:code }, checked:selected, click: $parent.clearRequiredSourceError ">
                <label data-bind="attr:{ for:id }, text: name"></label>
            </div>
        </fieldset>
    </div>
</div>

在提交前的验证函数中：

 // If there's any knockout validation errors
    if (model.errors().length > 0) {
        model.errors.showAllMessages();
        isValid = false;
    }    

我尝试在可观察的源数组上设置自定义验证扩展，如下所示：

this.sources = ko.observableArray(sources).extend({
        validation: {
            validator : function (sources) {
                var anySelected = false;
                $(sources).each(function(){
                   anySelected = this.selected();
                });
                return anySelected;
            },
            message: 'At least one source is required to search.'
        }
    });

但是当复选框被点击时不会触发，只有当数组被改变~推送、弹出等时才会触发。是的，我的配置设置正确：

ko.validation.configure({
        grouping: {
            deep: true,
            observable: true
        }
    });

这看起来应该很容易实现。也许我的大脑因为本周潜入整个淘汰赛世界而被炸毁。非常感谢任何建议。提前致谢！

Answer 1

请原谅我没有阅读您的整个问题，因为它很长，但我很好奇您是否需要为此进行 Knockout 验证，或者您是否正在寻找类似的东西 -

var selectedOption = ko.observable();
var selectionsOk = ko.computed(function () {
    ((!!field1()|| !!field1()|| !!field1())&&!!selectedOption())
});

其中 selectedOption 是一个单选按钮列表，一旦选择一个返回值，您可以使用 observableArray 来包含每个字段，使其是动态的，或者您列出字段并确保至少其中一个是有价值的。这 ！！将评估您的 observable 为 true 或 false，除非 observables 的值为 null、undefined、'' 或 false，否则将返回 true

计算出的 selectionOk 可用于防止单击某个按钮继续操作，或者相反用于在满足条件之前显示错误消息。