jsobell · September 4, 2016 10:49
diff --git a/app.html b/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 & validate">
    </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 & validate">
    </div>

  </form>
 </template>
diff --git a/app.js b/app.js
 import {inject} from 'aurelia-dependency-injection';
 import {
  ValidationControllerFactory,
  ValidationController,
  ValidationRules,
  Validator
 } from 'aurelia-validation';
 import {BootstrapFormRenderer} from './bootstrap-form-renderer';

 @inject(ValidationControllerFactory, Validator)
 export class App {
  controller = null;
  A = '';
  B = '';
  silentResult = '';
  
  constructor(controllerFactory, validator) {
    this.controller = controllerFactory.createForCurrentScope();
    this.controller.addRenderer(new BootstrapFormRenderer());
    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);
diff --git a/bootstrap-form-renderer.js b/bootstrap-form-renderer.js
 import {
  ValidationRenderer,
  RenderInstruction,
  ValidationError
 } from 'aurelia-validation';

 export class BootstrapFormRenderer {
  
  successElements = [];
  
  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) {
      return;
    }

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

    // 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');
      }
      formGroup.classList.add('has-success');
      this.successElements.push(formGroup);
    }
  }
  
  reset() {
    for(var e of this.successElements)
        e.classList.remove('has-success');
    this.successElements = [];
  }
 }
diff --git a/index.html b/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>
diff --git a/main.js b/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 & validate">
	</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 & validate">
	</div>

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

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

	constructor(controllerFactory, validator) {
	this.controller = controllerFactory.createForCurrentScope();
	this.controller.addRenderer(new BootstrapFormRenderer());
	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);
	import {
	ValidationRenderer,
	RenderInstruction,
	ValidationError
	} from 'aurelia-validation';

	export class BootstrapFormRenderer {

	successElements = [];

	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) {
	return;
	}

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

	// 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');
	}
	formGroup.classList.add('has-success');
	this.successElements.push(formGroup);
	}
	}

	reset() {
	for(var e of this.successElements)
	e.classList.remove('has-success');
	this.successElements = [];
	}
	}
	<!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());
	}