JSFiddle - React, Tailwind, and code Playground

by bradleytrager

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, css:{'error':showErrors}, valueUpdate: 'afterkeydown'" />
<br/>
<button data-bind="click: submit">Submit</button>
<div data-bind="visible: showErrors, text: errors"></div>

CSS

.error {
    background:red;
}

JavaScript

function ViewModel() {
    var self = this;
    self.username = ko.observable().extend({
        required: true
    });
    self.showErrors = ko.observable(false);
    self.username.subscribe(function () {
        self.removeErrors();
    });
    self.removeErrors = function () {
        self.showErrors(false);
    };
    self.submit = function () {
        self.showErrors(true);
        if (self.isValid()) {
            // save data here   
        }
    };
    self.errors = ko.validation.group(self);
}

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

ko.applyBindings(new ViewModel());