Knockout JS Validation using an AJAX Callback Result

I was looking for an easy way to implement a validation based on the result of an AJAX request without making it synchronous. I noticed that Knockout JS Validation wraps it’s calls to validation functions in a computed observable. This means our validation result will be dynamically re-evaluated if we base it on another observable.

The trick is to create an observable into which we feed the result of the HTTP call-back, and use that in the validation function. Here’s a code snippet using JQuery too, it assumes there’s a service that checks that the field value is unique and returns true or false.

var viewModel = {
    myField: ko.observable(null),
    isMyFieldUnique: ko.observable(true)
};

viewModel.myField.subscribe(function () {
    $.getJSON(
        'myservice?myField=' + escape(viewModel.myField(),
        function (result) {
            viewModel.isMyFieldUnique(result);
        }
    );
});

viewModel.myField.extend({
    validation: {
        validator: function (val, param) { 
            return viewModel.isMyFieldUnique();
        },
        message: "myField is not unique."
    }
});