Description

Input validation & error message display. Just give it an input element (the view), the validation rules and an optional object (the model).

Installation

Bower

bower install input-controller.js

How to use

In the browser

First, include the javascript in your HTML file(s). You can download the binaries from the releases section, or build them by yourself (see section below).

<script src="input-controller.js"></script>

Then simply instanciate your controller(s) :

var emailController = new InputController('input#email', isEmail); // input element & validation rule
var error = ...; // The HTML element that will display our error message if any

emailController.addInputCallback(function(event) { // Will be called each time the user types in
  error.innerHTML = event.valueIsValid
    ? '' // 'isEmail' function returned 'true'
    : 'Invalid email';  // 'isEmail' function returned 'false'
});

Build

If you don't want to use one of the pre-built binaries but want to build them by yourself, you have to download the NPM dependencies first :

npm install

Then launch the gulp task to build the files. They will be placed in a dist/ sub-directory.

# If you have gulp installed globally
gulp build

# If you don't
node_modules/gulp/bin/gulp.js build

Running tests

Note : You won't have the tests/ directory if you download this package via bower.

First you have to comment this line in index.js in the constructor function :

this.setEnabled(true);

If you don't, tests will fail cause it uses DOM functions which aren't available in a node environment.

Then run the units tests :

# If you have nodeunit installed globally
nodeunit build

# If you don't
node_modules/nodeunit/bin/nodeunit tests/units