Forked from TylerJPresley/custom-validation-view-strategy.js
Created
January 19, 2016 14:34
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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