JSFiddle - React, Tailwind, and code Playground

by Cristian Trifan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-debug.js"></script>
<script src="https://rawgit.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.js"></script>
Number of errors: <span data-bind="text: errors().length"></span>
<!-- ko foreach: rows -->
<hr/>
<input data-bind="value: numbers[0]"/><br/>
<input data-bind="value: numbers[1]"/><br/>
<!-- /ko -->

CSS

input{
width: 2em;
}

JavaScript

(function(){
    function Row(){
        //create array of observable numbers
        this.numbers = [
            ko.observable().extend({required: true}),
            ko.observable().extend({required: true})
        ];
    }

    function VM (){
        var self = this;
        this.rows = ko.observableArray([new Row()]);
        self.errors = ko.validation.group(self.rows, { deep: true, observable: true });

        self.errors.subscribe(function(){
            console.log(self.errors());
        });
    }
    ko.applyBindings( window.vm= new VM() );
}());