Skip to content

Instantly share code, notes, and snippets.

@airboss001

airboss001/app.html

Last active December 16, 2018 17:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save airboss001/d20ab1beb72b3d475b1c63838ecbd585 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save airboss001/d20ab1beb72b3d475b1c63838ecbd585 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Validation Demo
Raw
app.html
<template>
<require from="./registration-form"></require>
<registration-form></registration-form>
</template>
Raw
app.js
export class App {
}
Raw
bootstrap-form-renderer.js
import {
ValidationRenderer,
RenderInstruction,
ValidateResult
} from 'aurelia-validation';
export class BootstrapFormRenderer {
render(instruction: RenderInstruction) {
for (let { result, elements } of instruction.unrender) {
for (let element of elements) {
this.remove(element, result);
}
}
for (let { result, elements } of instruction.render) {
for (let element of elements) {
this.add(element, result);
}
}
}
add(element: Element, result: ValidateResult) {
if (result.valid) {
return;
}
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 = result.message;
message.id = `validation-message-${result.id}`;
formGroup.appendChild(message);
}
remove(element: Element, result: ValidateResult) {
if (result.valid) {
return;
}
const formGroup = element.closest('.form-group');
if (!formGroup) {
return;
}
// remove help-block
const message = formGroup.querySelector(`#validation-message-${result.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');
}
}
}
}
Raw
index.html
<!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">
<style>
registration-form {
display: block;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body aurelia-app="main">
<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>
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-validation');
aurelia.start().then(() => aurelia.setRoot());
}
Raw
registration-form.html
<template>
<form submit.delegate="submit()" change.delegate="checkFieldValidation()">
<!--<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>-->
<h3>Section 1 - Selects</h3>
<div class="form-group">
<label class="control-label" for="i1">Select 1</label>
<select class="form-control" id="i1" value.bind="data.select1Value & validate">
<option value="0">Not Selected</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group" if.bind="+data.select1Value == 2">
<label class="control-label" for="i2">Select 2</label>
<select class="form-control" id="i2" value.bind="data.select2Value & validate">
<option value="0">Not Selected</option>
<option value="1">Alpha</option>
<option value="2">Bravo</option>
</select>
</div>
<hr style="height: 4px; color: black; background-color: black;">
<h3>Section 2 - Checkbox and Text</h3>
<div class="form-group">
<label class="control-label" for="i3">Check Item</label></label>
<input type="checkbox" class="form-control" id="i3"
checked.bind="data.checkValue & validate">
</div>
<div class="form-group" if.bind="data.checkValue">
<label class="control-label" for="i4">Checked Item Text</label>
<input type="text" class="form-control" id="i4"
value.bind="data.textValue & validate">
</div>
<hr style="height: 4px; color: black; background-color: black;">
<h3>Section 3 - Text Change Update Button</h3>
This only happens on blur, and not when the text changes
<div class="form-group">
<label class="control-label" for="i5">Input Item Text</label>
<input type="text" class="form-control" id="i5"
value.bind="data.inputValue & validateOnChangeOrBlur">
</div>
<div class="form-group">
<input type="button" class="form-control" value="${btnText}" disabled.bind="enableButton">
</div>
<div if.bind="changeFired">
<h3 style="background-color: green;">Change Fired</h3>
</div>
<p>
selected1Value: ${data.select1Value}<br>
selected2Value: ${data.select2Value}<br>
checkValue: ${data.checkValue}<br>
textValue: [${data.textValue}]<br>
inputValue: [${data.inputValue}]<br>
<br>
isValid: ${isValid}
</p>
</form>
</template>
Raw
registration-form.js
import {inject} from 'aurelia-dependency-injection';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';
import {
ValidationControllerFactory,
ValidationController,
ValidationRules,
validateTrigger
} from 'aurelia-validation';
class MyClass {
select1Value = 0;
select2Value = 0;
checkValue = false;
textValue = '';
inputValue = '';
}
@inject(ValidationControllerFactory)
export class RegistrationForm {
controller = null;
data = null;
isValid = false;
enableButton = false;
btnText = "Button is disabled";
changeFired = false;
constructor(controllerFactory) {
this.controller = controllerFactory.createForCurrentScope();
this.controller.validateTrigger = validateTrigger.change;
this.controller.addRenderer(new BootstrapFormRenderer());
this.data = new MyClass();
}
submit() {
this.controller.validate();
}
checkFieldValidation(){
this.changeFired = true;
setTimeout(() => this.changeFired = false, 500);
this.controller.validate()
.then(result => {
this.isValid = result.valid;
this.enableButton = this.isValid;
this.setBtnText(this.enableButton);
});
}
setBtnText(enabled)
{
if(enabled) {
this.btnText = "Button is Enabled";
}
else {
this.btnText = "Button is disabled";
}
}
attached(){
ValidationRules
.ensure(a => a.select1Value).satisfies( (v,o) => {
if(+o.select1Value === 0){
return false;
}
return true;
})
.ensure(a => a.select2Value).satisfies( (v,o) => {
if(+o.select1Value === 2 && +o.select2Value === 0){
return false;
}
return true;
})
.when((o) =>
{
return +o.select1Value === 2;
})
.ensure(a => a.textValue).satisfies( (v,o) => {
if(o.checkValue && o.textValue.length < 1){
return false;
}
return true;
})
.when((o) =>
{
return o.checkValue;
})
.ensure(a => a.inputValue).satisfies( (v,o) => {
if(o.inputValue.length < 1){
return false;
}
return true;
})
.on(this.data);
this.controller.validate();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment