JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://rawgit.com/Knockout-Contrib/Knockout-Validation/797ef7706304041369eed924bcf581154f16e05c/Dist/knockout.validation.js"></script>
<div class="form-group">
    <label class="control-label">First Name: 
        <input class="form-control" data-bind='value: firstName'/></label><br />
    <label class="control-label">Second Name: 
        <input class="form-control" data-bind='value: secondName'/></label><br />
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.validationElement {
    background-color: #fee;
}

JavaScript

ko.validation.configure({
    decorateInputElement: true
});

// 要素の親のうち form-group であり、なおかつエラー要素を含むものに 
// config.errorParentClass クラスを指定する
var original_handler = ko.bindingHandlers.validationElement.update;
ko.bindingHandlers.validationElement.update =
    function (element, valueAccessor, allBindingsAccessor) {
        original_handler(element, valueAccessor, allBindingsAccessor);
        var config = ko.validation.utils.getConfigOptions(element);
        var group = $(element).parents('.form-group');
        group.toggleClass(
            'has-error',
            group.find("."+config.errorElementClass).length > 0
        );
    };

var model = {
    firstName: ko.observable().extend({ minLength: 2, maxLength: 10 }),
    secondName: ko.observable().extend({ minLength: 2, maxLength: 10 })
}

ko.applyBindings(model);