JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<script id="customMessageTemplate" type="text/html">
    <em class="customMessage" data-bind='validationMessage: field'></em>
</script>
<fieldset>
    <legend>Errors: <span data-bind='text: errors().length'></span> errors</legend>

    <div data-bind="foreach: notes">
       <label>Note Name: <input data-bind='value: name'/></label>
    </div>
    
</fieldset>
<button type="button" data-bind='click: submit'>Submit</button>

CSS

label { display: block; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }

JavaScript

var Note = function () {
    var self = this;
    self.name = ko.observable().extend({ required: true });
};

var viewModel = function() {
    var self = this;
    
    self.notes = ko.observableArray([new Note(), new Note()]);
    
    self.validatedObservables = function() {
        var arr = [];
        ko.utils.arrayForEach(self.notes(), function(note) {
            arr.push(note.name);
        });
        return arr;
    };
    
    self.errors = ko.validation.group(self.validatedObservables());
    
    self.submit = function () {
        if (self.errors().length != 0) {
            self.errors.showAllMessages();
        }
    };

};

ko.applyBindings(new viewModel());