JSFiddle - React, Tailwind, and code Playground

by Jorgelig

HTML

<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">    
    <input data-bind="value: firstName" />
    <br />
    <input data-bind="value: lastName" />
</div>
<script type="text/html" id="myCustomTemplate">
    <span data-bind="if: field.isModified() && !field.isValid(), attr: { title: field.error }">X</span>
</script>

JavaScript

var ViewModel = function () {
    var self = this;
    self.firstName = ko.observable().extend({ required: { message: "firstName" }});
    self.lastName = ko.observable().extend({ required: { message: "lastName" }});  
}

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

// modify the values to trigger validation
viewModel.firstName('');
viewModel.lastName('');