JontyMC/app.html

## app.html
<template>
  <form submit.delegate="submit()" novalidate autocomplete="off">
  <div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <button class="btn btn-success" click.delegate='reset()'>Reset</button>
    <button class="btn btn-info" click.delegate='silent()'>Check...</button>${silentResult}
  </div>
    <!--<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>-->

    <div class="form-group">
      <label class="control-label" for="A">String A</label>
        <input type="text" class="form-control" id="A" value.bind="A">
    </div>

    <div class="form-group">
      <label class="control-label" for="B">String B</label>
        <input type="text" class="form-control" id="B" value.bind="B">
    </div>

  </form>

  <h4>Errors detected by controller:</h4>
  <ul>
    <li repeat.for='e of controller.errors'>
      ${e.message}
    </li>
  </ul>

</template>

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

@inject(ValidationControllerFactory, Validator)
export class App {
  controller = null;
  A = '';
  B = '';
  silentResult = '';

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

  submit() {
    this.controller.validate().then(v =>
    {
      if (v.length)
        console.log('Errors:',v);
    });
  }

  silent() {
    this.validator.validate(this).then(e => this.silentResult = `${e.length} errors detected`);
  }

  reset() {
    this.A = this.B = '';
    this.controller.reset();
    for(var r of this.controller.renderers)
      r.reset();
  }
}

ValidationRules
  .ensure(a => a.A)
    .required()
  .ensure(a => a.B)
    .required()
  .on(App);

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </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());
}
	<template>
	<form submit.delegate="submit()" novalidate autocomplete="off">
	<div>
	<button type="submit" class="btn btn-primary">Submit</button>
	<button class="btn btn-success" click.delegate='reset()'>Reset</button>
	<button class="btn btn-info" click.delegate='silent()'>Check...</button>${silentResult}
	</div>
	<!--<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>-->

	<div class="form-group">
	<label class="control-label" for="A">String A</label>
	<input type="text" class="form-control" id="A" value.bind="A">
	</div>

	<div class="form-group">
	<label class="control-label" for="B">String B</label>
	<input type="text" class="form-control" id="B" value.bind="B">
	</div>

	</form>

	<h4>Errors detected by controller:</h4>
	<ul>
	<li repeat.for='e of controller.errors'>
	${e.message}
	</li>
	</ul>

	</template>
	import {inject} from 'aurelia-dependency-injection';
	import {
	ValidationControllerFactory,
	ValidationController,
	ValidationRules,
	Validator
	} from 'aurelia-validation';

	@inject(ValidationControllerFactory, Validator)
	export class App {
	controller = null;
	A = '';
	B = '';
	silentResult = '';

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

	submit() {
	this.controller.validate().then(v =>
	{
	if (v.length)
	console.log('Errors:',v);
	});
	}

	silent() {
	this.validator.validate(this).then(e => this.silentResult = `${e.length} errors detected`);
	}

	reset() {
	this.A = this.B = '';
	this.controller.reset();
	for(var r of this.controller.renderers)
	r.reset();
	}
	}

	ValidationRules
	.ensure(a => a.A)
	.required()
	.ensure(a => a.B)
	.required()
	.on(App);
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	</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());
	}