JSFiddle - React, Tailwind, and code Playground

by goneale

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/Knockout-Contrib/Knockout-Validation/master/Src/knockout.validation.js"></script>
Message: <input type="text" data-bind="value: message" />
<ul data-bind="foreach: people">
    <li><span data-bind="text: name"></span>, <select data-bind="options: $root.colors, optionsText: 'value', optionsValue: 'key', value: favColorId, optionsCaption: 'Choose...'"></select></li>
</ul>
<a href="#" data-bind="click: addAnother">add another row</a>

<br /><br />
<div data-bind="text: 'errors: ' + errors().length"></div>
<button data-bind="click: submit">submit</button>

CSS

span.validationMessage{color:red;}

JavaScript

function Person(id, name, favColorId) {
    return {
        id: ko.observable(id),
        name: ko.observable(name),
        favColorId: ko.observable(favColorId).extend({ required: true })
    };
}

var listOfPeople = [
    new Person(1, 'Fred', 3),
    new Person(2, 'Joe', 2),
    new Person(3, 'Sally', 1)
];

var viewModel = {
    colors: ko.observableArray(),
    message: ko.observable('initial value').extend({ required: true }),
    people: ko.observableArray(listOfPeople)
};
viewModel.errors = ko.validation.group(viewModel);
viewModel.addAnother = function() {
    viewModel.people.push(new Person(99, 'Person', 1));
};
viewModel.submit = function() {
    alert(viewModel.errors().length); 
}
    
var dict = [
    { key: 1, value: 'red' },
    { key: 2, value: 'blue' },
    { key: 3, value: 'green' }
];
viewModel.colors(dict);

ko.applyBindings(viewModel);