JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="https://rawgithub.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({validatable: true, required: true});
};

var viewModel = function() {
    var self = this;

    self.notes = ko.observableArray([new Note(), new Note()]);

    self.errors = ko.validation.group(self.notes(), { deep: true });

    self.submit = function() {
        if (self.errors().length != 0) {
            self.errors.showAllMessages();
        }
    };

};

ko.applyBindings(window.v = new viewModel());