Can't get validation to work on a simple login form

[jaysson]

I'm submitting a bug report

• Library Version: 0.12.0

Please tell us about your environment:

• Operating System: OSX 10.11

• Node Version: 6.3.1

• NPM Version: 3.10.3

• JSPM OR Webpack AND Version I am using aurelia cli (npm) to install packages.

• Browser: all
• Language: TypeScript 1.8

Current behavior: Validation doesn't work.

Here is my code:

login.ts

import {inject, NewInstance} from "aurelia-dependency-injection";
import {ValidationController} from 'aurelia-validation';
import {ValidationRules} from "aurelia-validatejs";

@inject(NewInstance.of(ValidationController))
export class Login {
    email:string;
    password:string;
    controller = null;

    constructor(controller) {
        this.controller = controller;
    }

    submit() {
        this.controller.validate();
    };
}

ValidationRules
    .ensure('email').email().required()
    .on(Login);

login.html

<template>
    <div class="row login">
        <div class="col-sm-6">
            <h3 class="accented-text">Sign In</h3>
            <ul if.bind="controller.errors">
                <li repeat.for="error of controller.errors">
                    ${error.message}
                </li>
            </ul>
            <form submit.delegate="submit()">
                <div class="form-group">
                    <label for="email" class="control-label required">Email</label>
                    <input class="form-control" value.bind="email & validate" id="email">
                </div>
                <div class="form-group">
                    <label for="password" class="control-label required">Password</label>
                    <input class="form-control" name="password" type="password"
                           id="password">
                </div>
                <div class="form-group">
                    <input id="remember_me" name="remember_me" type="checkbox" value="1">
                    <label for="remember_me" class="control-label">Remember me</label>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-block" type="submit">Login</button>
                </div>
            </form>
            <div class="clearfix bottom-margin accented-text">
                <div class="pull-left">
                    <a route-href="route: forgot_password">Forgot Password</a>
                </div>
                <div class="pull-right">
                    <a route-href="route: register">Sign up</a>
                </div>
            </div>
        </div>
    </div>
</template>

aurelia.json

...
{
            "name": "aurelia-validation",
            "path": "../node_modules/aurelia-validation/dist/amd",
            "main": "aurelia-validation"
          },
          {
            "name": "validate.js",
            "path": "../node_modules/validate.js",
            "main": "validate"
          },
          {
            "name": "aurelia-validatejs",
            "path": "../node_modules/aurelia-validatejs/dist/amd",
            "main": "aurelia-validatejs"
          }
...

main.ts

...
aurelia.use
        .standardConfiguration()
        .plugin('aurelia-validation')
        .plugin('aurelia-validatejs')
        .feature('resources');
...

[jdanyow]

Fix released- please update

[jaysson]

Problem remains same. Is there a demo project that I can learn from?

[y2k4life]

First I will let you know that aurelia-validatejs is deprecated. Check out Jason's example http://www.sobell.net/aurelia-validation/ You will also need to look at the documentation on the HUB too. Before you start Json's examples you will need to do the setup that is in the introduction http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/1 I would also suggest testing with a new project before incorporating into your own.