Hata bildirimi yerine hata mesajı yerine simge alanı gösteriliyor alan doğrulaması

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> 

Gönder düğmesini tıklatırken gerekli mesajı görüntülemek yerine her metin kutusu için simgeyi göstermesi gerekir.

devamı: çok geçerli yeni

Im için gerekli doğrulama fa-check-daire simgesi tarzı için fa-ünlem-daire simge stili doğrulama bu tür nasıl yapılacağını biliyorum bu yüzden söyle lütfen nakavt . , http://knockoutjs.com/documentation/if-binding.html

ikonların size

<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> 

bağlayıcı olmadığını alması gereken mantığı çalıştırmak istiyorsanız ya da js için bir doğrulama yardımcı sınıf yazabilirsiniz: bağlayıcı olmadığını

Answer 1

Aynı kullanarak özel şablonlar yapabilirsiniz. Aynı http://jsfiddle.net/nuDJ3/246/

HTML için bir keman yarattı

<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(''); 

benim için iyi çalışıyor.

Answer 2

Basitçe ko kullanabilirsiniz bileşenleri olarak çalışır.

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