Note that there are some explanatory texts on larger screens.

plurals
  1. POKnockoutJS Validation with dynamic observables
    primarykey
    data
    text
    <p>I am using this plugin <a href="https://github.com/ericmbarnard/Knockout-Validation" rel="nofollow">https://github.com/ericmbarnard/Knockout-Validation</a> and i am trying to validate an object that is loaded dynamically.</p> <p><strong>Javascript:</strong></p> <pre><code>function VM() { var self = this; // This is a static observable, just to ensure that basic validation works fine. self.static = ko.observable(); self.static.extend({required: true}); // This is the observable that will be updated to my model instance. self.person = ko.observable({}); // This is an handler for manual trigger. // I'm not even sure this is needed. self.a = function(){ self.errors.showAllMessages(); self.staticErrors.showAllMessages(); } // Here i'm loading current person from somewhere, i.e. a rest service. self.load = function() { // Update observable self.person(new Model()); // Define validation rules self.person().name.extend({required: true}); self.person().email.extend({required: true}); // Set person data self.person().name('Long'); self.person().email('John'); // Set validators self.errors = ko.validation.group(self.person); self.staticErrors = ko.validation.group(self.static); } } // Just a test model. function Model() { this.name = ko.observable(); this.email = ko.observable(); } ko.validation.init(); var vm = new VM(); ko.applyBindings(vm); </code></pre> <p>Markup</p> <pre><code>&lt;ul&gt; &lt;li&gt;1. Hit "Load"&lt;/li&gt; &lt;li&gt;2. Hit "Show errors", or maunally change input data.&lt;/li&gt; &lt;/ul&gt; &lt;button data-bind='click: load'&gt;Load&lt;/button&gt; &lt;br/&gt; &lt;h1&gt;This is working properly.&lt;/h1&gt; &lt;input type='text' data-bind='value: static' /&gt; &lt;br/&gt; &lt;h1&gt;This is not working.&lt;/h1&gt; &lt;input type='text' data-bind='value: person().name' /&gt; &lt;input type='text' data-bind='value: person().email' /&gt; &lt;br/&gt; &lt;button data-bind='click: a'&gt;Show errors&lt;/button&gt; </code></pre> <p>Fiddle <a href="http://jsfiddle.net/qGzfr/" rel="nofollow">http://jsfiddle.net/qGzfr/</a></p> <p>How do I make this work?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload