JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<input type="text" data-bind="value: username, validationElement: username, valueUpdate: 'afterkeydown'" />
<br/>
<button data-bind="click: submit">Submit</button>

CSS

.validationElement {
    border: 1px solid red;
}

JavaScript

function ViewModel() {
    var self = this;
    self.username = ko.observable().extend({
        required: true
    });

    this.validationModel = ko.validatedObservable({
        username: self.username
    }); 
    
    self.submit = function () {
        self.username.valueHasMutated();
        if (self.validationModel.isValid()) {
           alert("data saved");
        }
    }
}

ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: false,
    decorateElement: true
});

ko.applyBindings(new ViewModel());