Skip to content

Instantly share code, notes, and snippets.

@johntom
Last active November 27, 2020 16:25
Show Gist options
  • Save johntom/2ea107460973389b442031865bf0cf37 to your computer and use it in GitHub Desktop.
Save johntom/2ea107460973389b442031865bf0cf37 to your computer and use it in GitHub Desktop.
Aurelia Validation Demo - Nested Property validation
<template>
<form validation-errors="errors.bind: pizzaErrors; controller.bind: pizzaValidationController"
submit.delegate="orderPizza()">
<label for="pizza">Choose a pizza:</label>
<input id="pizza" value.bind="pizza & validateManually:pizzaValidationController">
<span class="help-block" repeat.for="errorInfo of pizzaErrors">
${errorInfo.error.message}
</span>
<input type="submit" value="Order pizza!">
</form>
<form validation-errors="errors.bind: pastaErrors; controller.bind: pastaValidationController"
submit.delegate="orderPasta()">
<label for="pasta">Choose a pasta:</label>
<input id="pasta" value.bind="pasta & validateManually:pastaValidationController">
<span class="help-block" repeat.for="errorInfo of pastaErrors">
${errorInfo.error.message}
</span>
<input type="submit" value="Order pasta!">
</form>
</template>
import {
ValidationControllerFactory,
ValidationController,
ValidationRules,
validateTrigger
} from 'aurelia-validation';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';
import {inject,bindable, NewInstance} from 'aurelia-framework';
@inject(ValidationControllerFactory)
export class ItalianRestaurant {
constructor(ValidationControllerFactory) {
this.pizzaValidationController = ValidationControllerFactory.createForCurrentScope();
this.pastaValidationController = ValidationControllerFactory.createForCurrentScope();
this.pizzaValidationController.addRenderer(new BootstrapFormRenderer());
this.pastaValidationController.addRenderer(new BootstrapFormRenderer());
const pizzaRules = ValidationRules
// .ensure((res: ItalianRestaurant) => res.pizza).required()
.ensure((res) => res.pizza).required()
.rules;
this.pizzaValidationController.addObject(this, pizzaRules);
const pastaRules = ValidationRules
.ensure((res: ItalianRestaurant) => res.pasta).required()
.rules;
this.pastaValidationController.addObject(this, pastaRules);
}
orderPizza() {
this.pizzaValidationController.validate()
.then(result => {
if (result.valid) {
alert("Ordering this pizza: " + this.pizza);
}
});
}
orderPasta() {
this.pastaValidationController.validate()
.then(result => {
if (result.valid) {
alert("Ordering this pasta: " + this.pasta);
}
});
}
}
import {
ValidationRenderer,
RenderInstruction,
ValidationError
} from 'aurelia-validation';
export class BootstrapFormRenderer {
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 || formGroup.classList.contains('hide-error')) {
return;
}
// add the has-error class to the enclosing form-group div
formGroup.classList.add('has-error');
// 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');
}
}
}
}
<!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());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment