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>
<!-- 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());
        });
        
        console.log(
            this.rows()[0].numbers[0].isValid(),
            this.rows()[0].numbers[0].error(),
            this.rows()[0].numbers[1].isValid(),
            this.rows()[0].numbers[1].error()
        );
    }
    ko.applyBindings( window.vm= new VM() );
}());