KO validation not displaying errors on Jquery autocomplete input
<p>I'm trying to use KO validation on an autocomplete input. The idea is to prevent the user from submitting the form if he hasn't selected a value from the autocomplete input.</p>

<p>The validation is working fine, but I don't get to show the actual validation message when validation fails. ('Select an existing ID from autocomplete results')</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var ViewModel = function() {
    var self = this;
    this.objectValue = ko.observable();    
    this.templateValue = ko.observable();        
    this.selectedID = ko.observable(null);

    this.objectChoices = [];
    this.stringChoices = [];

    for (var i = 0; i &lt; 100; i++) {
        this.objectChoices.push({ id: i, name: "item " + i, myLabel: "item label " + i });
        this.stringChoices.push("item " + i);
    }
  
    this.templateValue.subscribe(function(val){
        self.selectedID(val.id);
    });

    this.submit = function(){
      var validationObj = ko.validatedObservable({
            property1: self.templateValue.extend({
                validation: {
                    validator: function (val) {
                        return self.selectedID() !== null;
                    },
                    message: 'Select an existing ID from autocomplete results'
                }
            })
        });

        if (validationObj.errors().length) {
            validationObj.errors.showAllMessages();
            alert("Error! It should have shown the validation message");
            return false;
        } else {
            alert("No validation errors!");
            return true;
        }
    };
};

ko.applyBindings(new ViewModel());</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.1/knockout.validation.js"&gt;&lt;/script&gt;
&lt;script src="https://rawgit.com/rniemeyer/knockout-jqAutocomplete/master/build/knockout-jqAutocomplete.js"&gt;&lt;/script&gt;

&lt;input data-bind="jqAuto: {
    source: objectChoices,
    value: templateValue,
    inputProp: 'name',
    template: 'itemTmpl'
}" /&gt;

&lt;script id="itemTmpl" type="text/html"&gt;
&lt;a&gt;
    &lt;strong data-bind="text: id"&gt;&lt;/strong&gt;
    &lt;em data-bind="text: name"&gt;&lt;/em&gt;
&lt;/a&gt;
&lt;/script&gt;

&lt;button data-bind="click: submit"&gt;submit&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>Please check the fiddle: <a href="https://jsfiddle.net/orgvhw84/1/" rel="nofollow">https://jsfiddle.net/orgvhw84/1/</a></p>