Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save brettveenstra/c9b7950544a3cfd4bb02 to your computer and use it in GitHub Desktop.
Save brettveenstra/c9b7950544a3cfd4bb02 to your computer and use it in GitHub Desktop.
My custom approach to Aurelia's validation view strategy. It's closely based on the twbootstrap-view-strategy.js from within aurelia/validation.
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')))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment