JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<div class="control-group" data-bind="validationElement: measurement().value">
            <label class="control-label" for="value">
                Value
            </label>
            <div class="controls">
                <div class="input-append">
                    <input id="value" name="value" class="span2" type="text" data-bind="value: measurement().value"><span
                        data-bind="text: measurement().units" class="add-on units"></span>
                    <span class="help-inline" data-bind="validationMessage: measurement().value"></span>
                </div>
            </div>
        </div>

JavaScript

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: false,
    parseInputAttributes: true,
    messageTemplate: null,
    errorClass: "error",
    decorateElement: true
});

function Measurement() {
    var self = this;
    self.value = ko.observable().extend({
        number: true
    });
    self.units = ko.observable("Kgs");
}

function ViewModel() {
    this.measurement = ko.observable(new Measurement());
}


var vm = new ViewModel();
ko.applyBindings(vm);