ノックアウト検証プラグインを使用して、非常に簡単な検証を実行しようとしています。少なくとも1つのテキストフィールドにテキストがあり、少なくとも1つのチェックボックスがオンになっているかどうかを検証したいと思います。すべてのバインディングは正しく機能し、ノックアウト自体はこれまでのところ素晴らしいです。ネイティブ検証ルールをテストしましたが、メッセージングで機能します。これらの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.'
}
});
しかし、チェックボックスがクリックされたとき、それは配列が変更されたときだけ発火しません〜プッシュ、ポップなど。はい私は設定を正しく設定しています:
ko.validation.configure({
grouping: {
deep: true,
observable: true
}
});
これは、達成するのが非常に簡単なはずのようです。たぶん、私の脳は今週、ノックアウトの世界全体に飛び込むことから揚げられたばかりです。任意の提案は大歓迎です。前もって感謝します!
質問全体が非常に長いため、読んでいないことをお許しください。ただし、これにノックアウト検証が必要な場合、またはこのようなものを探している場合は、興味があります。
var selectedOption = ko.observable();
var selectionsOk = ko.computed(function () {
((!!field1()|| !!field1()|| !!field1())&&!!selectedOption())
});
selectedOptionはラジオボタンのリストであり、いずれかを選択すると値が返されます。observableArrayを使用して各フィールドを動的に含めるか、フィールドをリストして少なくとも1つを確認することができます。値があります。!! 真または偽としてあなたの観測可能性を評価し、真が返される観測の値だった場合を除きnull
、undefined
、''
、またはfalse
計算されたselectionOkを使用して、条件が満たされるまで、ボタンをクリックして続行したり、逆にエラーメッセージを表示したりするのを防ぐことができます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加