KnockoutJS：バインドされたコントロールが表示されている場合にのみモデルのプロパティを検証します。

Question

モデルにいくつかのコントロールにバインドされているモデルがあります。いくつかの条件に基づいて、これらのコントロールの一部が表示または非表示になります。そして最終的な提出で私は目に見えるものだけを検証すべきです。

次は、これらのコントロールの一部を表示または非表示になりますいくつかの条件に基づいて

<script src="knockout-3.4.0.js" type="text/javascript"></script> 
    <input type="checkbox" data-bind="checked:requireAge" >Age Required</input><br /> 
    Name : <input data-bind="value:Name" /><br /> 
    <div data-bind="visible:requireAge"> 
     Age: <input data-bind="value:Age,visible:requireAge" /> 
    </div> 

    <button type="button" onclick="validateModel();">Validate</button> 
    <script type="text/javascript"> 
     var viewModel = { Name: ko.observable(), Age: ko.observable(),requireAge:ko.observable(false) }; 
     ko.applyBindings(viewModel); 
     function validateModel() { 
      //validate visible properties and throw a common message that all visible fields should be filled 
     } 
    </script> 

Answer 1

私の提案は、ノックアウト・検証ライブラリを使用することです（あなたは私はあなたがすでにそれを使用していないと仮定し、あなたの質問にそれの何も言及していません）これはノックアウトとシームレスに結びつき、検証をはるかに便利にします。私は過去1年間にそれを広範囲にわたって使用してきたので、私の人生はずっと簡単になりました。観測値に有効な値が含まれているかどうかを追跡するために計算を作成する必要はありません。ノックアウト検証ライブラリはgithubにあります。

は、あなたのケースでは、単純に次の操作を行うことができます。

var viewModel = function(){ 
    var self = this; 
    self.name = ko.observable();  
    self.requireAge = ko.observable(false); 
    self.age = ko.observable().extend({ 
     required: { 
     onlyIf: function() { return self.requireAge(); } 
    } 
    }); 
}; 

検証エラーメッセージが自動的に観察がにバインドされている要素の下に挿入されています。独自のバリデーションルールを作成することもできますが、上記で説明したバリデーションルールを含む多くのバリデーションルールがあります。いくつかのルールにはいくつかのデータ属性を使用することもできます。これはおそらく、ノックアウトと組み合わせて検証を行う最良の方法です。

Answer 2

私の要件を説明するためのサンプルコードです。

の条件がモデルに含まれているとよいでしょう。検証方法も。

参照スニペット：

var viewModel = function() { 
 
\t this.Name = ko.observable(""); 
 
\t this.Age = ko.observable(""); 
 
\t this.requireAge = ko.observable(false); 
 
\t this.isValid = ko.computed(function() { 
 
\t \t if (ko.unwrap(this.Name).length === 0) return false; 
 
\t \t if (ko.unwrap(this.requireAge) && 
 
\t \t \t ko.unwrap(this.Age).length === 0) return false; 
 
\t \t return true; 
 
\t }, this); 
 
}; 
 

 
window.onload = function() { 
 
\t ko.applyBindings(new viewModel()); 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<input type="checkbox" data-bind="checked:requireAge" >Age Required</input><br /> 
 
Name : <input data-bind="value:Name" /><br /> 
 
<div data-bind="visible:requireAge"> 
 
    Age: <input data-bind="value:Age,visible:requireAge" /> 
 
</div> 
 

 
<div>is valid: <span data-bind="text: isValid"></span></div>