Symbole anzeigen statt Fehlermeldung in Knockout erforderlich Feldvalidierung

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> 

Need für jedes Textfeld auf das Symbol zeigen, anstatt gewünschte Nachricht zu zeigen, während die Schaltfläche selbst klicken einreichen.

fortsetzung: fa-Ausruf-Kreis-Symbol Stil für erforderlich Validierung fa-Check-Kreis-Symbol Stil für gültig

Im sehr neu KO so bitte sagen Sie mir weiß, wie diese Art der Validierung zu tun .

Answer 1

Sie können die gleichen mit benutzerdefinierten Vorlagen tun. eine Geige für die gleiche 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> 

erstellt

Ansichtsmodell

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

es funktioniert gut für mich.

Answer 2

einfach können Sie die ko verwenden, wenn die Bindung: http://knockoutjs.com/documentation/if-binding.html

Basicly wenn Sie die Logik wollen Sie laufen, wenn die Bindung

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

nehmen in sollte oder Sie können eine Validierung Hilfsklasse für js schreiben, Komponenten arbeiten als.

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