Awesome Open Source
Awesome Open Source

Angular Validate

Bower GitHub license

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


Table of contents

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


Download Angular Validate:

  • With NPM:
$ npm install jpkleemans-angular-validate
  • With Bower:
$ bower install jpkleemans-angular-validate
  • With Git:
$ git clone

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']);


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

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:

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:


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

Default validation options

    .config(function ($validatorProvider) {
            errorElement: 'span',
            errorClass: 'help-block'

More info:

Custom validation rules

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

More info:

Modify default error messages

    .config(function ($validatorProvider) {
            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:

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,065
angular (1,262
validation (311
angularjs (269
validate (21

Find Open Source By Browsing 7,000 Topics Across 59 Categories