JSFiddle - React, Tailwind, and code Playground

by gurkavcu

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>
<p>
    <label>Account name <input data-bind='value: itemToAdd().Name' /></label>        
    <button type="button" data-bind='click: createItem'>Add</button>                
</p>

<span data-bind="text: itemToAdd().Id"></span>
<span data-bind="text: itemToAdd().Name"></span>
<span data-bind="text: itemToAdd().UserId"></span>

CSS

label { display: block; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }

JavaScript

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

var activeAccount = function(id, name) {
            this.Id = ko.observable(id);
            this.Name = ko.observable(name).extend({ required: { message: 'Enter account name.'} });
            this.UserId = ko.observable(1);
        };

var viewModel = {
    itemToAdd: ko.observable(new activeAccount()),    
    createItem: function () {
        if (t().length == 0) {
            viewModel.itemToAdd(new activeAccount());
        } else {           
            t.showAllMessages();
        }
    }
};

var t = ko.validation.group(viewModel.itemToAdd);

ko.applyBindings(viewModel);