My custom approach to Aurelia's validation view strategy. It's closely based on the twbootstrap-view-strategy.js from within aurelia/validation.

custom-validation-view-strategy.js

import {ValidationViewStrategy} from 'aurelia-validation/validation-view-strategy';

export class CustomValidationViewStrategyBase extends ValidationViewStrategy {

  constructor(containerClass, containerSuccessClass, containerErrorClass, appendClass, appendActiveClass) {
    super();
    this.containerClass = containerClass; // The class for the container.
    this.containerErrorClass = containerErrorClass; // What's the error class for the container
    this.containerSuccessClass = containerSuccessClass; // What's the error class for the container
    this.appendClass = appendClass; // Where we're appending the message
    this.appendActiveClass = appendActiveClass; // The class that activates the error block where we're appending the message.
  }

  searchForValidationContainer(currentElement, currentDepth) {

    if (currentDepth === 5) {
      return null;
    }

    if (currentElement.classList && currentElement.classList.contains(this.containerClass)) {
      return currentElement;
    }

    return this.searchForValidationContainer(currentElement.parentNode, 1 + currentDepth);
  }

  searchForAppendClass(currentElement, currentDepth) {

    if (currentDepth === 5) {
      return;
    }
    if (currentElement.classList && currentElement.classList.contains(this.appendClass)) {
      return currentElement;
    }

    let childElem = null;
    for (let i = 0; i < currentElement.children.length; i++) {
      let elem = this.searchForAppendClass(currentElement.children[i], 1 + currentDepth);
      if (elem) { childElem = elem; break; }
    }

    if (childElem) { return childElem; }
  }

  appendUIVisuals(validationProperty, currentElement) {

    let validationContainer = this.searchForValidationContainer(currentElement, 0);
    if (validationContainer === null) {
      return;
    }

    let appendElement = this.searchForAppendClass(validationContainer, 0);

    if (!appendElement) {

      let currentElementsParent = currentElement.parentNode;

      appendElement = document.createElement('p');
      appendElement.classList.add(this.appendClass);

      currentElementsParent.appendChild(appendElement);
    }

    if (validationProperty && validationProperty.isDirty) {
      if (validationProperty.isValid) {
        appendElement.textContent = '';
        appendElement.classList.remove(this.appendActiveClass);
        validationContainer.classList.remove(this.containerErrorClass);
        validationContainer.classList.add(this.containerSuccessClass);
      } else {
        appendElement.textContent = validationProperty.message;
        appendElement.classList.add(this.appendActiveClass);
        validationContainer.classList.add(this.containerErrorClass);
        validationContainer.classList.remove(this.containerSuccessClass);
      }
    } else {
      appendElement.textContent = '';
      appendElement.classList.remove(this.appendActiveClass);
      validationContainer.classList.remove(this.containerErrorClass);
      validationContainer.classList.remove(this.containerSuccessClass);
    }

  }

  prepareElement(validationProperty, element) {
    this.appendUIVisuals(null, element);
  }

  updateElement(validationProperty, element) {
    this.appendUIVisuals(validationProperty, element);
  }

}

export class CustomValidationViewStrategy { }
CustomValidationViewStrategy.Bootstrap = new CustomValidationViewStrategyBase('form-group', 'has-success', 'has-error', 'help-block-error', 'help-block-error-show');


// Activate by adding the config to you main.js
// import {CustomValidationViewStrategy} from 'custom-validation-view-strategy.js';
// .plugin('aurelia-validation', (config) => config.useViewStrategy(CustomValidationViewStrategy.Bootstrap))

// You can easily define your own in your main.js file, e.g.
// import {CustomValidationViewStrategyBase} from 'custom-validation-view-strategy.js';
// .plugin('aurelia-validation', (config) => config.useViewStrategy(new CustomValidationViewStrategyBase('form-group', 'has-success', 'has-error', 'help-block', 'help-block-error')))

@TylerJPresley, this is amazing! Thanks, you've saved me hours of scratching around. I'm using Material Design Lite in my project and needed custom validation styling. Your gist just worked out the box!

I really think you should add a this as a pull request to the aurelia/validation project, and get it merged in. In the meantime I've shared this gist with the aurelia gitter channel, as I'm sure there's other community members that'll benefit.

Thanks again!

@TylerJPresley, this is superb! Thanks!