title: Aurelia validatejs not working when bind on a object
body: <p>I was playing around with aurelia-validatejs and was able to validate simple fields on a page. On the same page, I tried initializing a object and bind validation to that object and it stops working:</p>
  
  <pre><code>user_data:IUserData = {
      Login:"",
      Id         : null,
      UserProfile: {
          UserId: null
      },
      Permissions: null
  };
  constructor(){
      this.reporter = ValidationEngine.getValidationReporter(this.user_data);
  
      // if I just use this and not user_data object,
      // it works and error message is displayed in UI
  
      this.validator = new Validator(this.user_data)
          // when I use this.user_data (user_data object), it does validate 
          // and I can see validation result on console, but it's not shown in UI
  
          .ensure('Login').required().length({minimum: 3, maximum:10});
          this.observer = this.reporter.subscribe(result =&gt; {
              console.info(result);
          });
  }
  </code></pre>
  
  <p>Someone <a href="https://stackoverflow.com/a/35892564/1267177">mentioned</a> that validatejs looks for a label, and I do have it, it worked when I initialize on <code>this</code> object but as soon as I want to validate on this.user_data property, it just doesn't display in UI, but I can see it on console.</p>
  
  <pre><code>&lt;form action="" submit.delegate="createUser()"&gt;
      &lt;div class="input-group ${user_data.Login | loginClass}"&gt;
          &lt;label&gt;&lt;/label&gt;
          &lt;input placeholder="Login" type="text" class="form-control"
              keyup.delegate="validate()"  value.bind="user_data.Login &amp; validate"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>this doesn't work, but if I clear user_data like:</p>
  
  <pre><code>    user_data:IUserData = {
          Login:"",
          Id         : null,
          UserProfile: {
              UserId: null
          },
          Permissions: null
      };
  constructor(){
          this.reporter = ValidationEngine.getValidationReporter(this);
  
          //if I just use this and not user_data object,
          //it works and error message is displayed in UI
  
          this.validator = new Validator(this)
              .ensure('Login').required().length({minimum: 3, maximum:10});
          this.observer = this.reporter.subscribe(result =&gt; {
              console.info(result);
          });
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;form action="" submit.delegate="createUser()"&gt;
      &lt;div class="input-group ${user_data.Login | loginClass}"&gt;
          &lt;label&gt;&lt;/label&gt;
          &lt;input placeholder="Login" type="text" class="form-control"
              keyup.delegate="validate()"  value.bind="Login &amp; validate"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This works and is displayed in UI. I searched a little bit on stackoverflow and got few results <a href="https://stackoverflow.com/questions/35844923/aurelia-validation-working-but-not-displaying-validation-messages">similar</a> (My problem is similar. I have error messages on UI if I don't use it on a object but when I try to use it on an object, it logs on console but it doesn't display in UI)</p>
  
  <p>I also found <a href="https://stackoverflow.com/questions/30180765/aurelia-validation-validation-error-detected-but-no-error-message">this</a> but it wasn't of much help.</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/33934767/aurelia-validation-no-message-shown-on-failed-validation">one more</a> which wasn't of much help either.</p>
  
  <p>I understand there are a lot of articles which might make this question marked duplicate, the reason I'm asking is aurelia is quite new technology and stuffs are changing quite frequently.</p>
  
  <p>Thanks in advanced!</p>