ノックアウトのエラーメッセージの代わりにアイコンを表示する必要があるフィールドの入力

Question

<input type="text" data-bind="value:Firstname" /> 
<i class="fa fa-exclamation-circle"></i> 
<i class="fa fa-check-circle"></i> 
<input type="text" data-bind="value:Lastname" /> 
<i class="fa fa-exclamation-circle"></i> 
<i class="fa fa-check-circle"></i> 
<button type="button" data-bind="click: submit">Submit</button> 

[送信]ボタンをクリックしている間に必要なメッセージを表示する代わりに、各テキストボックスのアイコンを表示する必要があります。

続き： FA-感嘆符円アイコンのスタイルに必要な検証 FA-チェック丸いアイコンのスタイルのための有効な

ためのイムノックアウトするのは非常に新しいので、私はこの種のバリデーションを行う方法を知って教えてください。 、 http://knockoutjs.com/documentation/if-binding.html

Basiclyをあなたが

<input type="text" data-bind="value:Firstname" /> 
<!--ko if: validationIstrue--> 
<i class="fa fa-exclamation-circle"></i> 
<!--/ko --> 
<!--ko ifnot: validationIstrue--> 
<i class="fa fa-check-circle"></i> 
<!--/ko--> 

<button type="button" data-bind="click: submit">Submit</button> 

を結合場合で取るべきロジックを実行するかどうかは、JSの検証ヘルパークラスを書くことができますバインディング場合

Answer 1

カスタムテンプレートを使用して同じことを行うことができます。それは私のために正常に動作している同じhttp://jsfiddle.net/nuDJ3/246/

HTML

<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">  
    <input data-bind="value: firstName" /> 
    <br /> 
    <input data-bind="value: lastName" /> 
</div> 
<script type="text/html" id="myCustomTemplate"> 
    <span data-bind="if: field.isModified() && !field.isValid(), attr: { title: field.error }"><i class="fa fa-exclamation-circle"></i></span> 
    <span data-bind="if: field.isModified() && field.isValid(), attr: { title: field.error }"><i class="fa fa-check-circle"></i></span> 
</script> 

のViewModelのためのフィドル

var ViewModel = function() { 
    var self = this; 
    self.firstName = ko.observable().extend({ required: { message: "firstName" }}); 
    self.lastName = ko.observable().extend({ required: { message: "lastName" }}); 
} 

var viewModel = new ViewModel(); 

ko.applyBindings(viewModel); 

// modify the values to trigger validation 
viewModel.firstName(''); 
viewModel.lastName(''); 

を作成しました。

Answer 2

は、単にあなたがkoを使用することができますコンポーネントは次のように動作します。

http://knockoutjs.com/documentation/component-overview.html