JSFiddle - React, Tailwind, and code Playground

by homer2

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<div data-bind="with: person">
    Id <span data-bind="text: id">0</span><br />
    Name <input data-bind="value: name, valueUpdate: 'input'" value="." placeholder="new person name" /><br/>
    Modified Date <span data-bind="text: modifiedDate">0</span><br/>    
</div>
<p><span data-bind="visible: allErrors().isAnyMessageShown()">We have errors!</span></p>
<button data-bind="click: saveAndReloadPerson">Save And Reload Person</button>
<p data-bind="text: ko.toJSON($root)"></p>

JavaScript

ko.validation.init({
    grouping: { deep: true, observable: true, live: true }
});

function Person(person) {
    var self = this;
    person = person || {};

    self.id = ko.observable(person.id);
    self.name = ko.observable(person.name).extend({ required: { params: true, message: "Name required" }});
    self.modifiedDate = ko.observable(person.modifiedDate);
}

function VM(data) {
    var self = this;
    data = data || {};
    
    self.person = ko.observable(new Person(data));

    self.allErrors = ko.validatedObservable({
        person: self.person
    });

    self.saveAndReloadPerson = function () {
        debugger;
        if(self.allErrors.isValid()){
            self.person(new Person({ id: 1, name: "Tom", modifiedDate: new Date() }));
        }
        else{
            self.allErrors().errors.showAllMessages()
        }
    };

}

var vm = new VM({ id: 0, name: "" });
ko.applyBindingsWithValidation(vm);

//debugger;