JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<form>
<fieldset>
    <legend>User: <span data-bind='text: errors().length'></span> errors</legend>
    <label>User name: <input data-bind='value: userName' type="text"/></label><br/>
    <label>Password: <input data-bind='value: password' type="password"/></label>
    
</fieldset>
<button type="button" data-bind='click: login'>Login</button>
</form>

CSS

input.error {
    color: red;
    border-color: red;    
}

JavaScript

ko.validation.configure({
    insertMessages: false,
    decorateElement: true,
    errorElementClass: 'error',
    messagesOnModified: false    
});

function SignInViewModel() {

    var self = this;
    self.userName = ko.observable().extend({
        required: true
    });
    self.password = ko.observable().extend({
        required: true
    });

    self.errors = ko.validation.group(self);
    self.login = function (e) {

        if (self.errors().length == 0) {
            alert('No errors');
        } else {
            this.errors().forEach(function(data) {
			   alert(data);
		});
            //self.errors.showAllMessages(true);
        }
    }

}
$(function () {
    ko.applyBindings(new SignInViewModel());
});