挖空验证 - 至少一个字段具有值,并且至少选中了一个复选框
knockout validation - at least one field has a value and at least one checkbox checked
我正在尝试使用挖空验证插件进行一些非常简单的验证。我想验证是否至少有一个文本字段具有文本,并且至少选中了一个复选框。到目前为止,所有绑定都正常工作,淘汰赛本身很棒。我已经测试了本机验证规则,它们适用于消息传递。我只是无法让验证适用于这 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 来包含每个字段,使其是动态的,或者列出字段并确保其中至少有一个具有值。 这!!将评估您的可观察量为真或假,除非可观察量的值为 null
、undefined
、''
或 false
计算的 selectionOk 可用于防止单击某些按钮继续操作,或者反向用于显示错误消息,直到满足条件。
相关文章:
- 复选框:一次只允许单击一个复选框
- jquery从2个json字符串构建一个复选框表单
- 聚合物铁形式验证至少选中一个复选框
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 如果选中了以下复选框,请选中上一个复选框
- 如何通过jQuery选中所有复选框并在单击一个复选框时取消选择
- 如何发现至少有一个复选框被选中或没有使用javascript
- 在mvc4中选择另一个复选框时禁用复选框
- 在服务器上创建一个复选框,使用 javascript 处理函数
- jqGrid-当我点击网格中的另一个复选框时,选中多选复选框
- 确保至少选中一个复选框
- 选中一个复选框后,使用html.checkbox自动禁用其他复选框
- 创建一个复选框按钮的散列,这些按钮在单击时在Twitter Bootstrap Button组中处于活动状态
- 如果选中了上一个复选框,则需要的验证插件
- 取消选中一个复选框时,如何启用所有复选框?使用javascript
- 当选中一个复选框时,表单中的所有其他复选框都必须禁用-不工作
- 当一个复选框处于活动状态时,禁用所有复选框
- Angular 1:最后一个复选框没有'刷新页面后不要保持选中状态
- 当选中另一个复选框时,如何取消选中该复选框
- 允许用户只选择一个复选框(引导复选框-x)