dirty flag validation testing

by Silvestrs Kante

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<input data-bind="value: name, valueUpdate: 'afterkeydown'" />
<span data-bind="visible: dirt">data changed</span>
<span data-bind="visible: !name.isValid()">not valid</span>
<button data-bind="click: reset">Reset</button>
<button data-bind="click: checkValidation">Check</button>

JavaScript

;(function (ko) {
        ko.DirtyFlag = function (objectToTrack, isInitiallyDirty, hashFunction) {

            hashFunction = hashFunction || ko.toJSON;

            var
                _objectToTrack = objectToTrack,
                _lastCleanState = ko.observable(hashFunction(_objectToTrack)),
                _isInitiallyDirty = ko.observable(isInitiallyDirty),

                result = function () {
                    var self = this;

                    self.isDirty = ko.computed(function () {
                        return _isInitiallyDirty() || hashFunction(_objectToTrack) !== _lastCleanState();
                    });

                    self.reset = function () {
                        _lastCleanState(hashFunction(_objectToTrack));
                        _isInitiallyDirty(false);
                    };

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

var vm = function() {
    var self = this;
    self.name = ko.observable("Silvestrs").extend({required: true});
    self.dirtyFlag = new ko.DirtyFlag(self.name);
    self.reset = function(){
        self.dirtyFlag().reset();
    };
    self.dirt = ko.computed(function(){ 
        return self.dirtyFlag().isDirty();
    });
    self.checkValidation = function(){
     console.log("Validation " + self.name.isValid());   
    }
    console.log(self.dirtyFlag().isDirty());
    return self;
}

ko.applyBindings(new vm());