Due to a lot of recent changes to aurelia-validation. This tutorial is no longer work. I will try to provide some new post explaning the changes.

One of the features/plugin that I like best (mainly because its easy to setup and use in its basic form) is the aurelia-validation.

Recently there was some major changes to this plugin, but what I will discuss where is still valid, at least it is for me :).

If you have already Aurelia installed, you only need need to install the plugin, easy way using jspm:

bash
1
jspm install aurelia-validation

Next we need to load our plugin. On the file that we use for configuring all the plugins (usually main.js on the root of you project):

main.js
1
2
3
4
5
6
7
8
9
10
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation');

    aurelia.start().then(() => {
      aurelia.setRoot('app');
    });
}

With this done, we can start to create our form (form.html):

form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>

<form validate.bind="validation" submit.trigger="create()" autocomplete="off">
  <div class="form-group">
    <label>Name</label>
    <input
      type="text"
      id="title"
      class="form-control"
      placeholder="Title"
      value.bind="obj.title" />
  </div>

  <div class="form-group">
    <label>Description</label>
    <textarea
      rows="3"
      id="description"
      class="form-control"
      value.bind="obj.description">
    </textarea>
  </div>

  <button
    type="submit"
    class="btn btn-primary btn-sm"
    disabled.bind="!validation.result.isValid">Ok</button>

</form>

</template>

And our model (form.js):

controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { inject } from 'aurelia-framework';
import { Validation } from 'aurelia-validation';

// inject the validation class that we need
@inject(Validation)
export class Form {
  constructor(validation) {
    this.validation = validation;

    this.obj = {
      title: '',
      description: ''
    };

    // here we set the rules for our files
    this.validation = validation.on(this)
      .ensure('obj.title')
          .isNotEmpty()
          .hasMinLength(2)
          .hasMaxLength(120)
      .ensure('obj.description')
          .isNotEmpty()
          .hasMinLength(10)
          .hasMaxLength(420);
  }

  // method will be called when form is submitted
  create() {
    let _this = this;

    this.validation.validate()
      .then((validatedFields) => {

          // IF IT PASSES VALIDATION... YOU CAN DO STUFF
          // WHERE WITH UR obj
          console.info(_this.obj)
      });
  }
}

This is how easy is to get some simple validation done. You can go really crazy on the validations that are available. Other methods available range from isEmail(), isBetween(), containsNoSpaces(), containsOnlyAlpha(), isIn(), isGreaterThanOrEqualTo(), and much, much more.

Aurelia used to have a nice page with some examples here, but at the time of this post, probably related to the big changes to aurelia-validation plugin, the page was removed. Hopefully it will return with new updated stuff.

For instant help, you always ask in: https://gitter.im/aurelia/validation