JSFiddle - React, Tailwind, and code Playground

by goranobradovic

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
Model Name: 
<input type="text" data-bind="value: modelName">
<ul data-bind="foreach: names">
  <li>
      Name: <input type=text data-bind="value: name">
  </li>
</ul>

JavaScript

ko.validation.configure({
            registerExtenders: true,
            insertMessages: true,
                           messagesOnModified: true
 
});

var item = function(){
    var self = this;
    self.name = ko.observable('').extend({required: true});
};

var model = new function(){
    var self = this;
    self.modelName = ko.observable().extend({required: true});
    self.names = ko.observableArray([]);
    self.add_name = function(){
        var name = new item();
        name.errors = ko.validation.group(name);
        self.names.push(name);
    };
    self.show_messages = function(){
        self.errors.showAllMessages();
        ko.utils.arrayForEach(self.names(), function(name){
            name.errors.showAllMessages();
        });
    };
                     
}();

model.errors = ko.validation.group(model);
ko.applyBindings(model);
model.add_name();
model.show_messages();