Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jdanyow/ea843c24956cfffff48bb21776291f6a to your computer and use it in GitHub Desktop.
Save jdanyow/ea843c24956cfffff48bb21776291f6a to your computer and use it in GitHub Desktop.
Aurelia - bootstrap form validation feature
import {inject} from 'aurelia-dependency-injection';
import {validationRenderer} from 'aurelia-validation';
@validationRenderer
@inject(Element)
export class BootstrapFormValidationRenderer {
constructor(boundaryElement) {
this.boundaryElement = boundaryElement;
}
render(error, target) {
if (!target || !(this.boundaryElement === target || this.boundaryElement.contains(target))) {
return;
}
// tag the element so we know we rendered into it.
target.errors = (target.errors || new Map());
target.errors.set(error);
// add the has-error class to the bootstrap form-group div
const formGroup = target.querySelector('.form-group') || target.closest('.form-group');
formGroup.classList.add('has-error');
// add help-block
const message = document.createElement('span');
message.classList.add('help-block');
message.classList.add('validation-error');
message.textContent = error.message;
message.error = error;
formGroup.appendChild(message);
}
unrender(error, target) {
if (!target || !target.errors || !target.errors.has(error)) {
return;
}
target.errors.delete(error);
// remove the has-error class on the bootstrap form-group div
const formGroup = target.querySelector('.form-group') || target.closest('.form-group');
formGroup.classList.remove('has-error');
// remove all messages related to the error.
let messages = formGroup.querySelectorAll('.validation-error');
let i = messages.length;
while(i--) {
let message = messages[i];
if (message.error !== error) {
continue;
}
message.error = null;
message.remove();
}
}
}
// Polyfill for Element.closest and Element.matches
// https://github.com/jonathantneal/closest/
(function (ELEMENT) {
ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
ELEMENT.closest = ELEMENT.closest || function closest(selector) {
var element = this;
while (element) {
if (element.matches(selector)) {
break;
}
element = element.parentElement;
}
return element;
};
}(Element.prototype));
import {BootstrapFormValidationRenderer} from './bootstrap-form-validation-renderer';
export function configure(config) {
config.container.registerHandler(
'bootstrap-form',
container => container.get(BootstrapFormValidationRenderer));
}
@hosseinakbarian
Copy link

i want to use BootstrapFormValidationRenderer code in aurelia framework javascript but i have this error TypeError: Object(...) is not a function
at Module../src/bootstrap-form-validation-renderer.js

i have a registration form like this

<div class="form-group">
  <label class="control-label" for="first">First Name</label>
  <input type="text" class="form-control" id="first" placeholder="First Name"
         value.bind="firstName  & validate"><span></span>
</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="lastName & validate">
</div>

<div class="form-group">
  <label class="control-label" for="email">Email</label>
  <input type="text" class="form-control" id="email" placeholder="Email"
         value.bind="email & validate">
</div>

<button type="submit" class="btn btn-primary">Submit</button>

and a js file this

import {inject, NewInstance} from 'aurelia-dependency-injection';
import {ValidationController, validateTrigger} from 'aurelia-validation';
import {required, email} from 'aurelia-validatejs';
import {BootstrapFormValidationRenderer} from './bootstrap-form-validation-renderer';

@Inject(NewInstance.of(ValidationController), validateTrigger)
export class RegistrationForm {
@required
firstName = '';

@required
lastName = '';

@required
email = '';
constructor(controller) {
this.controller = controller;
controller.validateTrigger = validateTrigger.manual;
}

submit() {
let errors = this.controller.validate();
}
}

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