aurelia / validatejs

Enables expressive validation using decorators and/or a fluent API.
MIT License
22 stars 23 forks source link

Error: No BindingBehavior named "validate" was found! #104

Closed shaunluttin closed 8 years ago

shaunluttin commented 8 years ago
ERROR [app-router] Error: No BindingBehavior named "validate" was found!
Stack trace:
bind@http://localhost:9000/jspm_packages/npm/aurelia-binding@1.0.0-rc.1.0.2/aurelia-binding.js:1254:15
bind@http://localhost:9000/jspm_packages/npm/aurelia-binding@1.0.0-rc.1.0.2/aurelia-binding.js:4759:9
bind@http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-rc.1.0.0/aurelia-templating.js:1423:9
bind@http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-rc.1.0.0/aurelia-templating.js:3362:9
automate@http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-rc.1.0.0/aurelia-templating.js:3307:7
swap@http://localhost:9000/jspm_packages/npm/aurelia-templating-router@1.0.0-rc.1.0.0/router-view.js:209:7
_commitChanges/</<@http://localhost:9000/jspm_packages/npm/aurelia-router@1.0.0-rc.1.0.0/aurelia-router.js:362:18
_commitChanges/<@http://localhost:9000/jspm_packages/npm/aurelia-router@1.0.0-rc.1.0.0/aurelia-router.js:361:9

This our our template:

<template>
  <form submit.delegate="submit()">

    <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">
    </div>

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

This is our view-model.

import {autoinject} from 'aurelia-framework';
import {ValidationController, validateTrigger} from 'aurelia-validation';
import {required, email} from 'aurelia-validatejs';

@autoinject
export class TestForm {

  @required
  firstName = '';

  controller: ValidationController;

  constructor(controller: ValidationController) {
    this.controller = controller;
    controller.validateTrigger = validateTrigger.manual;
  }

  submit() {
    this.controller.validate();
  }
}

This is our main.ts

import 'twbs/bootstrap';
import {Aurelia} from 'aurelia-framework';
import config from 'authConfig';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('shaunluttin/aurelia-leaflet')
    .plugin('aurelia-validatejs')
    .plugin('aurelia-auth', (baseConfig) => {
      baseConfig.configure(config);
    });

  aurelia.use.plugin('aurelia-animator-css');

  aurelia.start().then(() => aurelia.setRoot());
}
shaunluttin commented 8 years ago

Solved. Add the following to main.ts.

.plugin('aurelia-validation')