Getting Started

📘

AngularJS ~1.5 is required

Installation

Install with NPM:

npm install angular-validity

or with Bower:

bower install angular-validity

or manually:

1. Download the latest release
2. Copy angular-validity.js to your project's script folder (e.g., /src/scripts)
3. Add script reference: <script src="src/scripts/angular-validity.js">

Add module reference

JavaScript

var exampleApp = angular.module("exampleApp", ["ttValidity"]);

CommonJS

If you're using CommonJS (e.g., Browserify, webpack), you can do something like:

JavaScript

require("angular-validity");
var exampleApp = angular.module("exampleApp", ["ttValidity"]);

Configuration

Set global options for Angular-Validity within your app module's config. In this example, we're configuring Angular-Validity to use the Bootstrap 3 style option:

JavaScript

exampleApp.config(["validityProvider", function (validityProvider) {
    validityProvider.options({
        style: "Bootstrap3"
    });
}]);

View

Add a validity directive to the input elements you want to validate, and specify the validation rules you want to use. In this example, the "required" and "email" rules are being added to the email input:

HTML

<section ng-controller="ExampleCtrl">
    <form name="form" ng-submit="example(form)" autocomplete="off">
        <label for="email">Email</label>
        <input type="text" name="email" ng-model="email" 
            validity="required email" />
        <button type="submit">Submit</button>
    </form>
</section>

Add a validity-message to the input for each of the rules you added, to define the validation message that should be used when the rule fails:

HTML

<section ng-controller="ExampleCtrl">
    <form name="form" ng-submit="example(form)" autocomplete="off">
        <label for="email">Email</label>
        <input type="text" name="email" ng-model="email" 
            validity="required email" 
            validity-message-required="Your email address is required"
            validity-message-email="Please enter a valid email address" />
        <button type="submit">Submit</button>
    </form>
</section>

Add a validity-label directive to the form, and configure it to display validation messages for the email input:

HTML

<section ng-controller="ExampleCtrl">
    <form name="form" ng-submit="example(form)" autocomplete="off">
        <label for="email">Email</label>
        <input type="text" name="email" ng-model="email" 
            validity="required email" 
            validity-message-required="Your email address is required"
            validity-message-email="Please enter a valid email address" />
        <validity-label for="email"></validity-label>
        <button type="submit">Submit</button>
    </form>
</section>

Controller

Add a validity module reference to the controller:

JavaScript

exampleApp.controller("ExampleCtrl", ["$scope", "validity", 
    function ($scope, validity) {

    }
]);

Call the validate function and pass in the form you want to validate. In this example, we've added a function called example and an ng-submit that calls it when the form is submitted.

JavaScript

exampleApp.controller("ExampleCtrl", ["$scope", "validity", 
    function ($scope, validity) {    
        $scope.example = function (form) {
            validity.validate(form);
        };
    }
]);

HTML

<section ng-controller="ExampleCtrl">
    <form name="form" ng-submit="example(form)" autocomplete="off">
        <label for="email">Email</label>
        <input type="text" name="email" ng-model="email" 
            validity="required email" 
            validity-message-required="Your email address is required"
            validity-message-email="Please enter a valid email address" />
        <validity-label for="email"></validity-label>
        <button type="submit">Submit</button>
    </form>
</section>

The validate function returns an AngularJS promise. Let's add a success callback to the deferred task. This callback will be called when the entire form is valid:

JavaScript

exampleApp.controller("ExampleCtrl", ["$scope", "validity", 
    function ($scope, validity) {    
        $scope.example = function (form) {
            validity.validate(form).then(function () {
                // Form is valid. Do something...
            });
        };
    }
]);

Putting it all together

Here's a working demo of what we just put together, complete with Bootstrap 3 styling. Take it for a spin, view the HTML and JavaScript, and then fiddle around with the source in JSFiddle: