JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<label>Name: </label>
<input type="text" data-bind="value: itemToBind.Name" />
<div class="validation-section">
    <strong>*</strong>
    <span data-bind="validationMessage: itemToBind.Name"></span>
</div>

CSS

.validation-section {
    color: red;
    display: inline;
}

JavaScript

var data = {
    Name: 'test'
};

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: false,
    insertMessages: false,
    parseInputAttributes: false,
    messageTemplate: null
});

var ns = ns || {}; // namespace

ns.ViewModel = function () {
    
    var itemToBind ,
        init = function (json) {
            // Uncomment to break;
            console.log(this,json);
            this.itemToBind =ko.mapping.fromJS(json, {});
            
            // Uncomment to make it work
            //itemToBind.Name = ko.observable(json.Name);
            
            this.itemToBind.Name.extend({ required: { message: 'Required' } });
        };
    
    return {
        itemToBind: itemToBind,
        init: init
    };
}();

ns.ViewModel.init(data);
ko.applyBindings(ns.ViewModel);