jdanyow/app.html

## app.html
<template>
  <require from="./form-control.html"></require>
  <form novalidate autofill="off">
    <form-control>
      <label slot="label" for="firstName" class="control-label">First Name:</label>
      <input slot="input" type="text" class="form-control"
             value.bind="firstName & validateOnChange">
    </form-control>
    <form-control>
      <label slot="label" for="lastName" class="control-label">Last Name:</label>
      <input slot="input" type="text" class="form-control"
             value.bind="lastName & validateOnChange">
    </form-control>
  </form>
</template>

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

@inject(NewInstance.of(ValidationController))
export class App {
  firstName = '';
  lastName = '';
}

ValidationRules
  .ensure('firstName').required().minLength(3).maxLength(50)
  .ensure('lastName').required().minLength(3).maxLength(50)
  .on(App);


## form-control.html
<template>
  <div validation-errors.bind="errors"
       class="form-group ${errors.length ? 'has-error' : ''}">

    <slot name="label"></slot>

    <slot name="input"></slot>

    <span class="control-label glyphicon glyphicon-exclamation-sign tooltips"
          show.bind="errors.length">
      <span>
        <span repeat.for="errorInfo of errors">${errorInfo.error.message}</span>
      </span>
    </span>
  </div>
</template>

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
      .tooltips {
        position: relative;
        display: inline;
      }
      .tooltips > span {
        position: absolute;
        color: #FFFFFF;
        background: #a94442;
        visibility: hidden;
        border-radius: 6px;
      }
      .tooltips > span:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -8px;
        width: 0; height: 0;
        border-right: 8px solid #a94442;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
      .tooltips:hover > span {
        visibility: visible;
        opacity: 0.8;
        left: 100%;
        top: 50%;
        margin-top: -15px;
        margin-left: 15px;
        z-index: 999;
      }
    </style>
  </head>
  <body aurelia-app="main" class="container">
    <h1>Loading...</h1>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <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>
	<require from="./form-control.html"></require>
	<form novalidate autofill="off">
	<form-control>
	<label slot="label" for="firstName" class="control-label">First Name:</label>
	<input slot="input" type="text" class="form-control"
	value.bind="firstName & validateOnChange">
	</form-control>
	<form-control>
	<label slot="label" for="lastName" class="control-label">Last Name:</label>
	<input slot="input" type="text" class="form-control"
	value.bind="lastName & validateOnChange">
	</form-control>
	</form>
	</template>
	import {inject, NewInstance} from 'aurelia-dependency-injection';
	import {ValidationRules, ValidationController, validateTrigger} from 'aurelia-validation';

	@inject(NewInstance.of(ValidationController))
	export class App {
	firstName = '';
	lastName = '';
	}

	ValidationRules
	.ensure('firstName').required().minLength(3).maxLength(50)
	.ensure('lastName').required().minLength(3).maxLength(50)
	.on(App);
	<template>
	<div validation-errors.bind="errors"
	class="form-group ${errors.length ? 'has-error' : ''}">

	<slot name="label"></slot>

	<slot name="input"></slot>

	<span class="control-label glyphicon glyphicon-exclamation-sign tooltips"
	show.bind="errors.length">
	<span>
	<span repeat.for="errorInfo of errors">${errorInfo.error.message}</span>
	</span>
	</span>
	</div>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<style>
	.tooltips {
	position: relative;
	display: inline;
	}
	.tooltips > span {
	position: absolute;
	color: #FFFFFF;
	background: #a94442;
	visibility: hidden;
	border-radius: 6px;
	}
	.tooltips > span:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -8px;
	width: 0; height: 0;
	border-right: 8px solid #a94442;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	}
	.tooltips:hover > span {
	visibility: visible;
	opacity: 0.8;
	left: 100%;
	top: 50%;
	margin-top: -15px;
	margin-left: 15px;
	z-index: 999;
	}
	</style>
	</head>
	<body aurelia-app="main" class="container">
	<h1>Loading...</h1>

	<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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