Angular Validate

Painless form validation for AngularJS. Powered by the jQuery Validation Plugin.

DEMO

Table of contents

1. Installation
2. Usage
3. Built-in validation rules
4. Configuration

Installation

Download Angular Validate:

• With NPM:

$ npm install jpkleemans-angular-validate

• With Bower:

$ bower install jpkleemans-angular-validate

• With Git:

$ git clone https://github.com/jpkleemans/angular-validate.git

• By manually downloading the latest release.

When using one of the last two methods make sure you also download the latest release of the jQuery Validation Plugin.

Include both jquery.validate.min.js and angular-validate.min.js in your HTML page:

<!-- jQuery scripts -->
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.validate.min.js"></script>

<!-- Angular scripts -->
<script src="path/to/angular.min.js"></script>
<script src="path/to/angular-validate.min.js"></script>

Inject the ngValidate module as a dependency into your Angular application:

angular.module('myApp', ['ngValidate']);

Usage

Add the ng-validate directive to your form and pass the validation options as value:

<form name="registerform" ng-submit="register(registerform)" ng-validate="validationOptions">
    <input type="email" name="email">
    <input type="password" name="password">
</form>

Set validation options

Then set the validation options in your controller:

$scope.validationOptions = {
    rules: {
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            minlength: 6
        }
    },
    messages: {
        email: {
            required: "We need your email address to contact you",
            email: "Your email address must be in the format of [email protected]"
        },
        password: {
            required: "You must enter a password",
            minlength: "Your password must have a minimum length of 6 characters"
        }
    }
}

Or (for simple forms) insert the options directly without using a controller:

<form name="simpleform" ng-submit="register(simpleform)" ng-validate="{rules: {name: "required"}}">

For all available options, see: http://jqueryvalidation.org/validate#validate-options

Check form validity

Now you can validate the form by calling validate() on the form instance:

$scope.register = function (form) {
    if(form.validate()) {
        // Form is valid!
    }
}

You can also pass your validation options as the first parameter of validate().

Get number of invalid fields

$window.alert("There are " + form.numberOfInvalids() + " invalid fields.");

Built-in validation rules

A set of standard validation rules is provided by the jQuery Validation Plugin:

• required – Makes the element required.
• remote – Requests a resource to check the element for validity.
• minlength – Makes the element require a given minimum length.
• maxlength – Makes the element require a given maxmimum length.
• rangelength – Makes the element require a given value range.
• min – Makes the element require a given minimum.
• max – Makes the element require a given maximum.
• range – Makes the element require a given value range.
• email – Makes the element require a valid email.
• url – Makes the element require a valid url.
• date – Makes the element require a date.
• dateISO – Makes the element require an ISO date.
• number – Makes the element require a decimal number.
• digits – Makes the element require digits only.
• creditcard – Makes the element require a credit card number.
• equalTo – Requires the element to be the same as another one.

More info: http://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods

Configuration

Angular Validate ships with a $validatorProvider, that you can use to configure default validation options and custom validation rules.

Default validation options

angular.module('myApp')
    .config(function ($validatorProvider) {
        $validatorProvider.setDefaults({
            errorElement: 'span',
            errorClass: 'help-block'
        });
    });

More info: http://jqueryvalidation.org/jQuery.validator.setDefaults

Custom validation rules

angular.module('myApp')
    .config(function ($validatorProvider) {
        $validatorProvider.addMethod("domain", function (value, element) {
            return this.optional(element) || /^http:\/\/mydomain.com/.test(value);
        }, "Please specify the correct domain for your documents");
    });

More info: http://jqueryvalidation.org/jQuery.validator.addMethod

Modify default error messages

angular.module('myApp')
    .config(function ($validatorProvider) {
        $validatorProvider.setDefaultMessages({
            required: "This field is required.",
            remote: "Please fix this field.",
            email: "Please enter a valid email address.",
            url: "Please enter a valid URL.",
            date: "Please enter a valid date.",
            dateISO: "Please enter a valid date (ISO).",
            number: "Please enter a valid number.",
            digits: "Please enter only digits.",
            creditcard: "Please enter a valid credit card number.",
            equalTo: "Please enter the same value again.",
            accept: "Please enter a value with a valid extension.",
            maxlength: $validatorProvider.format("Please enter no more than {0} characters."),
            minlength: $validatorProvider.format("Please enter at least {0} characters."),
            rangelength: $validatorProvider.format("Please enter a value between {0} and {1} characters long."),
            range: $validatorProvider.format("Please enter a value between {0} and {1}."),
            max: $validatorProvider.format("Please enter a value less than or equal to {0}."),
            min: $validatorProvider.format("Please enter a value greater than or equal to {0}.")
        });
    });

More info: http://jqueryvalidation.org/jQuery.validator.format