0

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

我意识到我可以使用 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
        }
    });

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

4

1 回答 1

2

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

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

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

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

于 2013-09-27T19:31:07.630 回答