JSFiddle - React, Tailwind, and code Playground

by Cristian Trifan

HTML

<script src="https://cdn.rawgit.com/Knockout-Contrib/Knockout-Validation/v2.1.0/dist/knockout.validation.js"></script>
<input type="text" data-bind="textInput: value">

CSS

input {
  padding: 4px 6px;
  margin-right: 6px;
  border: 1px solid #756D6D;
  border-radius: 2px;
}
input.validationElement {
  border: 1px solid #F36868;
}
.validationMessage {
  color: #F36868;
}

JavaScript

var viewModel = {
  value: ko.observable(1).extend({
    min: {
      params: 3
    }
  })
};

ko.applyBindingsWithValidation(viewModel, {
  decorateInputElement: true, 
  decorateElementOnModified: false,
  messagesOnModified: false
});