Knockout.Validation Unusable, Any Alternatives? Or Workarounds? - validation

Question

I'm searching for a knockout validation plugin and I stumbled upon knockout.validation which looks very promising, however, it has a fatal flaw..
Once you have created a ko.validatedObservable({ name: foo }) you are not able to assign a new object to that observable.
For Example: In my view model I instantiate a validated observable.
var item = new ko.validatedObservable(new Tag({}));
I am then able to call:
item().isValid(); //Returns false in this case because Tag is empty
Tag looks like this
Model.Tag = function (data) {
var
Id = ko.observable(data.Id),
Name = ko.observable(data.Name).extend({ required: true, maxLength: 64 }),
Description = ko.observable(data.Description).extend({ required: true, maxLength: 512 });
return {
Id: Id,
Name: Name,
Description: Description
};
};
The issue is if I wanted to get a new tag from the server and then modify that tag..
$.ajax({
url: API + "/" + id,
type: 'GET',
dataType: 'json',
timeout: Timeout,
statusCode: {
200: function(response) { item(response); }, //Here is where the bug is!
404: ItemNotFound
},
error: function () {
Item(new Type({}));
}
});
item now contains the value from the server, however, when I run
item().isValid(); //False is returned
This is listed as bug #209 on the GitHub project https://github.com/ericmbarnard/Knockout-Validation/issues?state=open.
Does anyone know of an elegant work around? Or of another plugin that will accomplish this goal?

Answer 1

I don't know how elegant it is, and maybe this is not the best solution (or not a solution at all) so use it at your own risk.
But you can override the ko.validatedObservable with a "fixed" version:
ko.validatedObservable = function (initialValue) {
if (!ko.validation.utils.isObject(initialValue)) {
return ko.observable(initialValue).extend({ validatable: true });
}
var obsv = ko.observable(initialValue);
obsv.lastErrors = ko.observable(ko.validation.group(initialValue));
obsv.subscribe(function(newValue){
obsv.lastErrors(ko.validation.group(newValue));
});
obsv.errors = function() {
return obsv.lastErrors()();
};
obsv.isValid = ko.computed(function () {
return obsv.errors().length === 0;
});
return obsv;
};
My fix stores the result of the ko.validation.group call and recalculates it when the underlying obsv observable changes and I've also changed the original errors property to use the lastErrors property.
I've update the sample from the github issue you check in this demo JSFiddle.