挖空验证 - 至少一个字段具有值,并且至少选中了一个复选框

knockout validation - at least one field has a value and at least one checkbox checked

本文关键字:一个 复选框 验证 字段      更新时间:2023-09-26

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

意识到我可以很容易地用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.'
        }
    });

但是当单击复选框时,这不会触发,只有当数组被更改~push,pop等时才会触发。是的,我正确设置了配置:

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

这似乎应该很容易实现。也许我的大脑本周只是因为潜入整个淘汰赛世界而炸了。任何建议将不胜感激。提前感谢!

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

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

其中 selectedOption 是单选按钮的列表,一旦选择一个按钮,就会返回值,您可以使用 observableArray 来包含每个字段,使其是动态的,或者列出字段并确保其中至少有一个具有值。 这!!将评估您的可观察量为真或假,除非可观察量的值为 nullundefined''false

计算的 selectionOk 可用于防止单击某些按钮继续操作,或者反向用于显示错误消息,直到满足条件。