JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.js"></script>
<button data-bind="click: update">Update</button><button data-bind="click: remove">Remove</button>
<hr>
<div>
    <input type="text" data-bind="value: value">
    <input type="text" data-bind="value: anotherValue">
    <p data-bind="validationMessage: value"></p>
    <p data-bind="validationMessage: anotherValue"></p>
</div>

JavaScript

ko.validation.init({
    insertMessages: false
});

var data = {
    value: '',
    anotherValue: 'ba',
    property: 'bb',
    update: function() {
        this.value('a');
    },
    remove: function() {
        this.anotherValue('');
    }
};

var viewModel = ko.mapping.fromJS(data, {
    observe: ['value', 'anotherValue']
});

viewModel.value.extend({
    required: true,
    minLength: 3
});

viewModel.anotherValue.extend({
    minLength: 3    
});

viewModel.anotherValue.extend({
    pattern: '^a.$'
});

ko.applyBindings(viewModel);

console.log(viewModel);

ko.validation.group(viewModel);
viewModel.errors.showAllMessages();