JSFiddle - React, Tailwind, and code Playground

HTML

<div>
     <h2>Test 1</h2> 
    <div>Validate entry with an event callback.</div>
    <input type="text" data-bind="value: number1, valueUpdate: 'afterkeydown', event: { change: validateNumber1 }, css: { error : !number1valid() }"
    /> <span class="error" data-bind="visible: !number1valid()">This is not a valid nuumber.</span> 
</div>
<div>
     <h2>Test 2</h2> 
    <div>Validate entry with a computed observable.</div>
    <input type="text" data-bind="value: number2, valueUpdate: 'afterkeydown', css: { error : !number2valid() }"
    /> <span class="error" data-bind="visible: !number2valid()">This is not a valid nuumber.</span> 
</div>
<div>
     <h2>Test 3</h2> 
    <div>Force valid entry by binding to computed observable.</div>
    <input type="text"
    data-bind="value: number3, valueUpdate: 'afterkeydown'" />
</div>
<div>
     <h2>Test 4</h2> 
    <div>Force valid entry by subscribing to observable.</div>
    <input type="text"
    data-bind="value: number4, valueUpdate: 'afterkeydown'" />
</div>

CSS

input.error {
    border: 1px solid red;
}
.error {
    color: red;
}

JavaScript

function ViewModel() {
    var self = this;

    self.number1 = ko.observable(0);
    self.number1valid = ko.observable(true);
    self.validateNumber1 = function () {
        self.number1valid(!isNaN(self.number1()));
    };
    self.number2 = ko.observable(0);
    self.number2valid = ko.computed(function () {
        return !isNaN(self.number2());
    });
    self._number3 = ko.observable(0);
    self.number3 = ko.computed({
        read: function () {
            return self._number3();
        },
        write: function (value) {
            self._number3(value);
            if (isNaN(value)) self._number3(0);
        },
        owner: self
    });

    self.number4 = ko.observable(0);
    self.number4.subscribe(function () {
        if (isNaN(self.number4())) self.number4(0);
    });
}

ko.applyBindings(new ViewModel());