JQuery + KO + ko-mapping + ko-validation Skeleton
JQuery, KO, ko-mapping, ko-validation skeleton.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<p><input data-bind="textInput: Name"></p>
<p>txt = <span data-bind="text: Name"></span></p>
<hr>
<ul data-bind="foreach: Players">
<li><input data-bind="textInput: LastName"></li>
</ul>
<hr>
<button data-bind="click: showErrors">
Show errors</button>
CSS
pre { font: 11px consolas; padding: 5px; background: #fafafa; border: 1px solid #ddd; }
JavaScript
var Player = function () {
var self = this;
self.FirstName= ko.observable().extend({
required: {
message: 'Player First Nameis required.'
}
});
self.LastName= ko.observable().extend({
required: {
message: 'Player Last Name is required.'
}
});
}
var form = function () {
var self = this;
self.showErrors = function(){
self.errors.showAllMessages();
};
self.Name = ko.observable().extend({
required: {
message: 'Name is required.'
}
});
self.Manager = ko.observable().extend({
required: {
message: 'Manager is required.'
}
});
self.Email = ko.observable().extend({
required: {
message: 'Email is required.'
},
email: {
message: 'Entered Email is not valid.'
}
});
self.Players = ko.observableArray([]);
self.errors = ko.validation.group(self, { deep: true, live: true });
}
var vm = new form();
vm.Players.push(new Player());
vm.Players.push(new Player());
ko.applyBindings(vm);
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
parseInputAttributes: true,
messageTemplate: null,
decorateInputElement: true,
errorElementClass: 'error',
grouping: {
deep: true,
observable: true
}
}, true);