Aurelia ValidationRules не запускается

Question

Я новичок в Aurelia Js, и мне нужно сделать валидацию формы входа (требуется и emial). Здесь я использовал aurelia-validation плагин. Мой код ниже, login.js

import {Router} from 'aurelia-router'; 
import { 
    ValidationRules 
} from 'aurelia-validation'; 

export class login{ 
    static inject() { return [Router]; } 
    attached(){ 
    } 
} 
ValidationRules 
    .ensure('login.emial').required() 
    .withMessage(`\${$displayName} cannot be blank.`); 
` 

я не знаю, как вызвать это и показать сообщение об ошибке.

main.js

import $ from 'jquery'; 
export function configure(aurelia) { 
aurelia.use 
    .defaultBindingLanguage() 
    .defaultResources() 
    .developmentLogging() 
    .router() 
    .history() 
    .eventAggregator() 
    .plugin("aurelia-materialize-css") 
    .plugin('aurelia-validation') 
; 
aurelia.start().then(() => aurelia.setRoot()); 

} HTML

<input id="email" type="email" class="validate" value.bind="login.emial"> 

Answer 1

login.js

import {ValidationRules} from 'aurelia-validation'; 

export class Login{ 
    email = ''; 
} 

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

login.html

<template> 
    <input value.bind="email & validate"> 
</template> 

• https://gist.run/?id=381fdb1a4b0865a4c25026187db865ce
• https://gist.run/?id=1d612b3ae341c7e9c12113e1771988e7

Answer 2

Из вышеприведенного Джереми Danyow ответ Must и вы должны иметь, чтобы обеспечить форм-группу класса на верхней части поля ввода, как показано ниже кода. то только валидация будет работать, иначе это не сработает.

<div class="form-group"> 
     <input value.bind="email & validate"> 
</div>