Knockout validation hello world not running on jsfiddle

Question

I'm trying to ask a question about async knockout.js validation running on page load, and I'm attempting to reproduce the issue on jsfiddle.

Thing is, I can't get the most basic example to work, despite having a more complex scenario running on my box. What's wrong with this?

http://jsfiddle.net/C5rSm/4/

I have to post code:

<div id="vm">
    <input type="text" data-bind="value: validatableField" />
    <p data-bind="validationMessage: validatableField"></p>
    <button data-bind="click: alertValue">value is alerted ok, but doesn't validate</button>
</div>

var Vm = function(){
    var self = this;
    self.validatableField = ko.observable().extend({ equal: 2 });
    self.alertValue = function(){
        alert(self.validatableField());
    };
};

ko.applyBindings(new Vm(), document.getElementById('vm'));

Answer 1

There is nothing wrong with your code.

However the current version of the validation plugin on (cdnjs 1.0.2) is quite old and it has a bug which prevents the ko.validation.registerExtenders working correctly. This bug has been fixed since then.

As a workaround you need to call ko.validation.registerExtenders() at the start of your fiddle:

ko.validation.registerExtenders();
var Vm = function(){
    var self = this;
    self.validatableField = ko.observable().extend({ equal: "2" });
    self.alertValue = function(){
        alert(self.validatableField());
    };
};

ko.applyBindings(new Vm(), document.getElementById('vm'));

Demo JSFiddle.