validation message/error message

by sderico

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<p>Add to value with the same name:</p>

<span data-bind="validationOptions: { insertMessages: false}">New Item: 
    <input data-bind="value:newItem" /> 
    <button data-bind="click: addItem">Add</button>
</span>

<div data-bind="foreach: items">
    <span data-bind="text: $data"></span>    
</div>

<p data-bind="validationMessage: newItem"></p>

JavaScript

ko.validation.rules['duplicate'] = {
    validator: function (item, array) {
        return array.indexOf(item) == -1;
    },
    message: 'Value already exists!'
};
ko.validation.registerExtenders();

var ViewModel = function() {
    var self = this;
    self.items = ko.observableArray();
    self.newItem = ko.observable().extend({duplicate: self.items});
    self.addItem = function() {
        if (self.newItem().length > 0 && self.newItem.isValid()) {
           self.items.push(self.newItem());
           self.newItem(null);
        }
    };
}
 
ko.applyBindings(new ViewModel());