JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<p> <span>Plan Name:</span>

    <input type="Text" data-bind="value: IntroData.PlanName"></input>
    <br /> <span>Name:</span>

    <input type="Text" data-bind="value: name"></input>
</p>

JavaScript

"use strict";
var stuff = {
    IntroData: {
        PlanName: 'Test'
    },
    name: 'tes2s3t'
};

var validationMapping = {
    IntroData: {
        create: function (options) {
			var nestedMapping = {
				PlanName: {
					create: function (options) {
						return ko.observable(options.data).extend({
							required: true
						});
					}
				}
			}
		
			return ko.mapping.fromJS(options.data, nestedMapping);
		}
    },
    name: {
        create: function (options) {
            return ko.observable(options.data).extend({
                required: true
            });
        }
    }
};
ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null,
    grouping: {
        deep: true
    }
}, true);
window.viewModel = ko.validatedObservable(ko.mapping.fromJS(stuff, validationMapping));

ko.applyBindings(window.viewModel);