jambutler/app.html

## app.html
<template>
  <require from="./textbox"></require>

  <form submit.delegate="submit()">
    <ul><li repeat.for="error of controller.errors">${error.message}</li></ul>

    <textbox value.bind="firstName & validate" label="First Name"></textbox>

    <textbox value.bind="lastName & validate" label="Last Name"></textbox>

    <textbox value.bind="email & validate" label="Email"></textbox>

    <button type="submit">Submit</button>
  </form>
</template>

## app.js
import {inject} from 'aurelia-dependency-injection';
import {
  ValidationControllerFactory,
  ValidationController,
  ValidationRules
} from 'aurelia-validation';

@inject(ValidationControllerFactory)
export class App {
  firstName = '';
  lastName = '';
  email = '';
  controller = null;

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

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

ValidationRules
  .ensure(a => a.firstName).required()
  .ensure(a => a.lastName).required()
  .ensure(a => a.email).required().email()
  .on(App);

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main" class="container">
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation');

  aurelia.start().then(() => aurelia.setRoot());
}

## textbox.html
<template>
  <div class="form-field">
    <div class="form-field__label">
      ${label}
      <input name.bind="name"
             id.bind="name"
             class="form-field__input"
             type.bind="type"
             value.bind="value"
             tabindex.bind="tabIndex"
             blur.trigger="blur()">
    </div>
  </div>
</template>

## textbox.js
import {bindable, bindingMode, DOM, inject} from 'aurelia-framework';

@inject(Element)
export class Textbox {
  @bindable({defaultBindingMode: bindingMode.twoWay}) value: string;
  @bindable label: string;
  @bindable type: string = "textbox";
  @bindable tabIndex: number;
  @bindable hidden: boolean;
  @bindable name: string = '';
  element: Element;

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

  blur() {
    this.element.dispatchEvent(DOM.createCustomEvent('blur'));
  }
}
	<template>
	<require from="./textbox"></require>

	<form submit.delegate="submit()">
	<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>

	<textbox value.bind="firstName & validate" label="First Name"></textbox>

	<textbox value.bind="lastName & validate" label="Last Name"></textbox>

	<textbox value.bind="email & validate" label="Email"></textbox>

	<button type="submit">Submit</button>
	</form>
	</template>
	import {inject} from 'aurelia-dependency-injection';
	import {
	ValidationControllerFactory,
	ValidationController,
	ValidationRules
	} from 'aurelia-validation';

	@inject(ValidationControllerFactory)
	export class App {
	firstName = '';
	lastName = '';
	email = '';
	controller = null;

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

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

	ValidationRules
	.ensure(a => a.firstName).required()
	.ensure(a => a.lastName).required()
	.ensure(a => a.email).required().email()
	.on(App);
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main" class="container">
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-validation');

	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<div class="form-field">
	<div class="form-field__label">
	${label}
	<input name.bind="name"
	id.bind="name"
	class="form-field__input"
	type.bind="type"
	value.bind="value"
	tabindex.bind="tabIndex"
	blur.trigger="blur()">
	</div>
	</div>
	</template>
	import {bindable, bindingMode, DOM, inject} from 'aurelia-framework';

	@inject(Element)
	export class Textbox {
	@bindable({defaultBindingMode: bindingMode.twoWay}) value: string;
	@bindable label: string;
	@bindable type: string = "textbox";
	@bindable tabIndex: number;
	@bindable hidden: boolean;
	@bindable name: string = '';
	element: Element;

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

	blur() {
	this.element.dispatchEvent(DOM.createCustomEvent('blur'));
	}
	}