JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<p>First name:
<input data-bind="value: person().firstName" />
</p>
<button data-bind="click: changePerson">Change Person</button>
CSS
.input-validation-error {
border: solid 1px red !important
}
JavaScript
var ViewModel = function (first) {
this.person = ko.observable(new Person(first));
this.changePerson = function () {
this.person(new Person("changed"));
};
};
var Person = function (first) {
this.firstName = ko.observable(first).extend({
required: true
});
};
ko.validation.init({
decorateElement: true,
errorElementClass: "input-validation-error"
},
true);
ko.applyBindings(new ViewModel("Planet"));