Skip to content

Instantly share code, notes, and snippets.

@y2k4life
Last active Sep 10, 2019
Embed
What would you like to do?
Aurelia Interger Range Validation Example in Documentatoin
<template>
<div>
<a href="http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/9" target="top">Documentation</a>
</div>
<form submit.delegate="submit()" novalidate autocomplete="off">
<!--<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>-->
<div class="form-group">
<label class="control-label" for="volumeA">A) Integer Range Validation Example In Documentation</label>
<input type="text" class="form-control" id="volumeA" value.bind="volumeA & validate">
</div>
<div class="form-group">
<label class="control-label" for="volumeB">B)Integer Range Validation Proposed Change</label>
<input type="text" class="form-control" id="volumeB" value.bind="volumeB & validate">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</template>
import {inject} from 'aurelia-dependency-injection';
import {
ValidationControllerFactory,
ValidationController,
ValidationRules
} from 'aurelia-validation';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';
@inject(ValidationControllerFactory)
export class App {
controller = null;
constructor(controllerFactory) {
this.controller = controllerFactory.createForCurrentScope();
this.controller.addRenderer(new BootstrapFormRenderer());
}
submit() {
this.controller.validate();
}
}
//
// This is what is in the documentation for the custom rule.
//
ValidationRules.customRule(
'integerRangeA',
(value, obj, min, max) => value === null || value === undefined
|| Number.isInteger(value) && value >= config.min && value <= config.max,
`\${$displayName} must be an integer between \${$config.min} and \${config.max}.`,
(min, max) => ({ min, max })
);
//
// This is the proposed change to the rule.
//
ValidationRules.customRule(
'integerRangeB',
(value, obj, min, max) => {
var num = Number.parseInt(value);
return value === null
|| value === undefined
|| value.trim() === ''
|| (Number.isInteger(num) && num >= min && num <= max)
},
`\${$displayName} must be an integer between \${$config.min} and \${$config.max}.`,
(min, max) => ({ min, max })
);
ValidationRules
.ensure(a => a.volumeA)
.required()
.satisfiesRule('integerRangeA', 1, 5000)
.ensure(a => a.volumeB)
.required()
.satisfiesRule('integerRangeB', 1, 5000)
.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) {
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());
}
@codercampos
Copy link

codercampos commented Sep 10, 2019

Nice! I did an implementation similar like yours but somehow not working. My lambda expression for the validation was bad implemented.

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