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>
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 -->
Even if both fields are filled, errors array length is stil equal to 1.

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() );
}());