Question

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

我意识到我可以使用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评估为真或假，除非可观察量的值为null，undefined，''或false

，否则将返回true

selectionOk computed可用于防止单击某个按钮继续或反向显示错误消息，直到满足条件。

敲除验证 - 至少一个字段具有值并且至少选中了一个复选框

1 个答案: