angular-validity

Angular-Validity

Asynchronous validation for Angular applications

---

• About
• Getting Started
• Demos

Quick Start

AngularJS ~1.5 is required

If you require AngularJS ~1.4, use Angular-Validity v1.2

Installation

Install with NPM:

npm install angular-validity

or with Bower:

bower install angular-validity

Add module reference

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

CommonJS

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

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:

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:

<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:

<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:

<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:

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.

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

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:

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

Putting it all together

Here's a working demo on JSFiddle 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.