title: Using Aurelia validation in model
body: <p>This is a similar to <a href="https://stackoverflow.com/questions/32490823/centralize-aurelia-validation-logic">this</a> but we want to define validation logic in model level but the following doesn't show validation message.</p>
  
  <p><strong>user-model.js</strong> (not working)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {transient, inject} from 'aurelia-framework';
  import {ensure} from 'aurelia-validation';
  
  @transient()
  export class UserModel {
    @ensure(function(it) { it.isNotEmpty().hasLengthBetween(3,10) })
    firstName = "";
    constructor() {
      this.firstName = "";
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>user.js</strong> (not working)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {inject} from 'aurelia-framework';
  import {Validation} from 'aurelia-validation';
  import {UserModel} from 'models/user-model';
  
  @inject(Validation, UserModel)
  export class User {
    
    constructor(validation, userModel) {
      this.userModel = userModel;
      this.validation = validation.on(this);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>user.html</strong> (not working)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form role="form" validate.bind="validation"&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;First Name&lt;/label&gt;
      &lt;input type="text" validate="model.firstName" value.bind="model.firstName" class="form-control" &gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Notice that validate="model.firstName" is used in user.html, which kind of makes the validation work, meaning I see 'has-success' class gets added to form-group div when user input is valid, but it doesn't display message when it's NOT valid input. 
  But, if I take out the validation logic outside of the user-model.js and put it in user.js like below, it works just fine.</p>
  
  <p><strong>user-model.js</strong> (working)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {transient, inject} from 'aurelia-framework';
  
  @transient()
  export class UserModel {
    constructor() {
      this.firstName = "";
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>user.js</strong> (working)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {inject} from 'aurelia-framework';
  import {Validation} from 'aurelia-validation';
  import {UserModel} from 'models/user-model';
  
  @inject(Validation, UserModel)
  export class User {
    
    constructor(validation, userModel) {
      this.model = userModel;
      this.validation = validation.on(this)
        .ensure('model.firstName')
          .isNotEmpty()
          .hasLengthBetween(3,10);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>user.html</strong> (working)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form role="form" validate.bind="validation"&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;First Name&lt;/label&gt;
      &lt;input type="text" value.bind="model.firstName" class="form-control" &gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>We are trying to define validation logic in user model itself so that when we need to use it in other UIs, we have the centralized location to validate it instead of copy &amp; paste the logic everywhere. It's possible that I am doing something wrong, but if anyone knows how to accomplish this, any help is appreciated!</p>