Skip to content

Instantly share code, notes, and snippets.

@jsobell
Last active Feb 22, 2018
Embed
What would you like to do?
Aurelia Validation Demo - Nested object properties - working
<template>
<form submit.delegate="submit()">
<!--<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>-->
<div class="form-group">
<label class="control-label" for="fst">First Name</label>
<input type="text" class="form-control" id="fst" placeholder="Last Name"
value.bind="user.fname & validate">
</div>
<div class="form-group">
<label class="control-label" for="last">Last Name</label>
<input type="text" class="form-control" id="last" placeholder="Last Name"
value.bind="user.lname & validate">
</div>
<div class="form-group">
<label class="control-label" for="addr">Address</label>
<input type="text" class="form-control" id="addr" placeholder="Address"
value.bind="address & validate">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<ul>
<li repeat.for='e of controller.errors'>
${e.message}
</li>
</ul>
</form>
</template>
import {inject} from 'aurelia-dependency-injection';
import {
ValidationControllerFactory,
ValidationController,
ValidationRules,
validateTrigger
} from 'aurelia-validation';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';
@inject(ValidationControllerFactory)
export class App {
controller = null;
user = new User();
address = '';
constructor(controllerFactory) {
this.controller = controllerFactory.createForCurrentScope();
this.controller.addRenderer(new BootstrapFormRenderer());
this.controller.addObject(this);
this.controller.addObject(this.user);
}
submit() {
this.controller.validate();
}
}
export class User {
fname;
lname;
}
ValidationRules
.ensure(a => a.fname).required()
.ensure(a => a.lname).required()
.on(User);
ValidationRules
.ensure(a => a.address).required()
.on(App);
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());
}
@zen-ninja
Copy link

zen-ninja commented Feb 22, 2018

Hi, this helped but do you have an example of when validation is triggered on change?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment