funky-jojo/app.html

## app.html
<template>
  <router-view></router-view>
</template>

## app.js
export class App {


      configureRouter(config, router) {
        config.title = 'Aurelia Notes';
        config.map([
            { route: '', redirect: 'home' },
            { name: 'home', route: 'home', moduleId: 'home' },
            { name: 'validation', route: 'validation', moduleId: 'validation' }
        ]);

    }

}

## bootstrap-form-renderer.js
import {
  ValidationRenderer,
  RenderInstruction,
  ValidationError
} from 'aurelia-validation';

export class BootstrapFormRenderer {
  render(instruction) {
    for (let { error, elements } of instruction.unrender) {
      for (let element of elements) {
        this.remove(element, error);
      }
    }

    for (let { error, elements } of instruction.render) {
      for (let element of elements) {
        this.add(element, error);
      }
    }
  }

  add(element, error) {
    const formGroup = element.closest('.form-group');
    if (!formGroup || formGroup.classList.contains('hide-error')) {
      return;
    }

    // add the has-error class to the enclosing form-group div
    formGroup.classList.add('has-error');

    // add help-block
    const message = document.createElement('span');
    message.className = 'help-block validation-message';
    message.textContent = error.message;
    message.id = `validation-message-${error.id}`;
    formGroup.appendChild(message);
  }

  remove(element, error) {
    const formGroup = element.closest('.form-group');
    if (!formGroup) {
      return;
    }

    // remove help-block
    const message = formGroup.querySelector(`#validation-message-${error.id}`);
    if (message) {
      formGroup.removeChild(message);

      // remove the has-error class from the enclosing form-group div
      if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) {
        formGroup.classList.remove('has-error');
      }
    }
  }
}

## home.html
<template>
  <h1>Home</h1>
  <a route-href="route:validation">Go To Validation</a>
</template>

## home.js
export class Home{

}

## 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());
}

## subinput.html
<template>
  This is a sub-input! <input value.bind='model' blur.trigger='triggerEvent("blur")'>
</template>

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

@inject(Element)
export class subinput {
  @bindable({defaultBindingMode: bindingMode.twoWay}) model;

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

 triggerEvent = (type) => this.element.dispatchEvent(DOM.createCustomEvent(type));
}

## validation.html
<template>
  <require from='subinput'></require>

  <a route-href="route:home">Go Home</a>

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

    <div class="form-group">
      <label class="control-label" for="first">First Name</label>
      <select value.bind="firstName & updateTrigger:'input' & validate">
        <option value='Jason'>Jason</option>
        <option value='Fred'>Fred</option>
        <option value=''>None</option>
      </select>
    </div>

    <div class="form-group">
      <label class="control-label" for="sub">Sub-Input</label>
      <subinput id='sub' model.bind="sub & validate"></subinput>
      [${sub}]
    </div>


    <div class="form-group">
      <label class="control-label" for="pw">Password</label>
      <input type="text" class="form-control" id="pw" placeholder="Password"
             value.bind="password & validate">
    </div>

    <div class="form-group">
      <label class="control-label" for="cf">Confirm</label>
      <input type="text" class="form-control" id="cf" placeholder="Confirmation"
             value.bind="confirm & validate">
    </div>

    <div class="form-group">
      <label class="control-label" for="last">Last Name</label>
      <input type="text" class="form-control" id="last" placeholder="Last Name"
             value.bind="lastName & validate">
    </div>

    <div class="form-group">
      <label class="control-label" for="email">Email</label>
      <input type="email" class="form-control" id="email" placeholder="Email"
             value.bind="email & validate">
    </div>

    <div class="form-group">
      <label class="control-label" for="agree">Agreement</label>
      <input type="checkbox" id="agree"
             checked.bind="agree & validate">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

    <ul>
      <li repeat.for='e of controller.errors'>${e.message}</li>
    </ul>

  </form>
</template>

## validation.js
import {inject} from 'aurelia-dependency-injection';
import {
  ValidationControllerFactory,
  ValidationController,
  ValidationRules,
  validateTrigger
} from 'aurelia-validation';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';

@inject(ValidationControllerFactory)
export class Validation {
  firstName = '';
  lastName = '';
  password = '';
  confirm = '';
  email = '';
  sub='';
  controller = null;

  constructor(controllerFactory) {
    this.controller = controllerFactory.createForCurrentScope();
    this.controller.addRenderer(new BootstrapFormRenderer());
    //this.controller.validateTrigger=validateTrigger.change;
  }

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

ValidationRules
  .ensure(a => a.firstName).required()
  .ensure(a => a.sub).required()
  .ensure(a => a.lastName).required()
  .ensure(a => a.email).required().email()
  .ensure(a => a.agree).required().withMessage('You must agree to the terms')
  .ensure(a => a.password).required().withMessage('A password is required')
  .ensure(a => a.confirm).satisfies((x, obj) => x === obj.password).withMessage('Passwords must match')
  .on(Validation);
	export class App {


	configureRouter(config, router) {
	config.title = 'Aurelia Notes';
	config.map([
	{ route: '', redirect: 'home' },
	{ name: 'home', route: 'home', moduleId: 'home' },
	{ name: 'validation', route: 'validation', moduleId: 'validation' }
	]);

	}

	}
	import {
	ValidationRenderer,
	RenderInstruction,
	ValidationError
	} from 'aurelia-validation';

	export class BootstrapFormRenderer {
	render(instruction) {
	for (let { error, elements } of instruction.unrender) {
	for (let element of elements) {
	this.remove(element, error);
	}
	}

	for (let { error, elements } of instruction.render) {
	for (let element of elements) {
	this.add(element, error);
	}
	}
	}

	add(element, error) {
	const formGroup = element.closest('.form-group');
	if (!formGroup \|\| formGroup.classList.contains('hide-error')) {
	return;
	}

	// add the has-error class to the enclosing form-group div
	formGroup.classList.add('has-error');

	// add help-block
	const message = document.createElement('span');
	message.className = 'help-block validation-message';
	message.textContent = error.message;
	message.id = `validation-message-${error.id}`;
	formGroup.appendChild(message);
	}

	remove(element, error) {
	const formGroup = element.closest('.form-group');
	if (!formGroup) {
	return;
	}

	// remove help-block
	const message = formGroup.querySelector(`#validation-message-${error.id}`);
	if (message) {
	formGroup.removeChild(message);

	// remove the has-error class from the enclosing form-group div
	if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) {
	formGroup.classList.remove('has-error');
	}
	}
	}
	}
	<template>
	<h1>Home</h1>
	<a route-href="route:validation">Go To Validation</a>
	</template>
	<!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());
	}
	<template>
	This is a sub-input! <input value.bind='model' blur.trigger='triggerEvent("blur")'>
	</template>
	import {inject, bindable, bindingMode, DOM} from 'aurelia-framework';

	@inject(Element)
	export class subinput {
	@bindable({defaultBindingMode: bindingMode.twoWay}) model;

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

	triggerEvent = (type) => this.element.dispatchEvent(DOM.createCustomEvent(type));
	}
	<template>
	<require from='subinput'></require>

	<a route-href="route:home">Go Home</a>

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

	<div class="form-group">
	<label class="control-label" for="first">First Name</label>
	<select value.bind="firstName & updateTrigger:'input' & validate">
	<option value='Jason'>Jason</option>
	<option value='Fred'>Fred</option>
	<option value=''>None</option>
	</select>
	</div>

	<div class="form-group">
	<label class="control-label" for="sub">Sub-Input</label>
	<subinput id='sub' model.bind="sub & validate"></subinput>
	[${sub}]
	</div>


	<div class="form-group">
	<label class="control-label" for="pw">Password</label>
	<input type="text" class="form-control" id="pw" placeholder="Password"
	value.bind="password & validate">
	</div>

	<div class="form-group">
	<label class="control-label" for="cf">Confirm</label>
	<input type="text" class="form-control" id="cf" placeholder="Confirmation"
	value.bind="confirm & validate">
	</div>

	<div class="form-group">
	<label class="control-label" for="last">Last Name</label>
	<input type="text" class="form-control" id="last" placeholder="Last Name"
	value.bind="lastName & validate">
	</div>

	<div class="form-group">
	<label class="control-label" for="email">Email</label>
	<input type="email" class="form-control" id="email" placeholder="Email"
	value.bind="email & validate">
	</div>

	<div class="form-group">
	<label class="control-label" for="agree">Agreement</label>
	<input type="checkbox" id="agree"
	checked.bind="agree & validate">
	</div>

	<button type="submit" class="btn btn-primary">Submit</button>

	<ul>
	<li repeat.for='e of controller.errors'>${e.message}</li>
	</ul>

	</form>
	</template>
	import {inject} from 'aurelia-dependency-injection';
	import {
	ValidationControllerFactory,
	ValidationController,
	ValidationRules,
	validateTrigger
	} from 'aurelia-validation';
	import {BootstrapFormRenderer} from './bootstrap-form-renderer';

	@inject(ValidationControllerFactory)
	export class Validation {
	firstName = '';
	lastName = '';
	password = '';
	confirm = '';
	email = '';
	sub='';
	controller = null;

	constructor(controllerFactory) {
	this.controller = controllerFactory.createForCurrentScope();
	this.controller.addRenderer(new BootstrapFormRenderer());
	//this.controller.validateTrigger=validateTrigger.change;
	}

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

	ValidationRules
	.ensure(a => a.firstName).required()
	.ensure(a => a.sub).required()
	.ensure(a => a.lastName).required()
	.ensure(a => a.email).required().email()
	.ensure(a => a.agree).required().withMessage('You must agree to the terms')
	.ensure(a => a.password).required().withMessage('A password is required')
	.ensure(a => a.confirm).satisfies((x, obj) => x === obj.password).withMessage('Passwords must match')
	.on(Validation);