jpkleemans-angular-validate

Painless form validation for AngularJS. Powered by the jQuery Validation Plugin.
1 person uses it
Author: 5700014?v=3 jpkleemans

Angular Validate

Bower GitHub license

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

If the code blocks aren't visible, click here to read the README on GitHub.

Table of contents

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

Installation

Download Angular Validate:

  • With Bower:
  • With Git:

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 (after jQuery and Angular):

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

Usage

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

Set validation options

Then set the validation options in your controller:

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

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:

By default, invalid fields are highlighted when calling validate(). If you don't want this, you can pass false as the first parameter: validate(false).

Get number of 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

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

Custom validation rules

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

comments powered by Disqus
This page was last updated almost 2 years ago.