AngularJS form validation library (Directives)

AngularJS comes with some validation primitives which can be used to do form validation. This requires decent amount of boilerplate and one needs to create custom validators for any non standard validation. To make things simpler we created a set to directives that can be use to enhance the standard validations. This post would detail about the directives we have created and how to use them in your project. For the impatient ones the code is available here. We have also created a jsfiddle so you can play around with it.

There are four directives in total

1. Validation message directive (validation-messages)
2. Custom Validator for local validation (custom-validator)
3. Remote Validator for remote validation (custom-remote-validator)
4. Model update on control blur (update-on-blur)

Validation Messages Directive (validation-messages)

If one looks as any Angular validation sample you typically see such code

[gist]https://gist.github.com/chandermani/9387934[/gist]

With the validation-messages directive this becomes [gist]https://gist.github.com/chandermani/9387995[/gist]

A more terse syntax 🙂

Usage

1. Create the error messages using the syntax errorKey-error=”Message” for each validation attached to the input. For the above example there are two validation on the email, required and email itself so the validation message keys used are required-error and email-error. Remember every validations defined on input have error keys. Even if you create a custom validation directive you need to define the errorKey.
2. Provide the reference to the ngModelController that needs to validated using property model-controller=’formname.inputname’

The directive works by iterating over the $error object map defined on ngModelController of the input. Look at samples in the forms developer guide to understand how validation works in AngularJS

You can customize the error message template. The template that we use is

[gist]https://gist.github.com/chandermani/9388036[/gist]

The second set of directives here are custom-validator and custom-remote-validator.

Custom Validation Directives (custom-validator and custom-remote-validator)

We created two directives, one to do local validations (custom-validator) and one for remote validation(custom-remote-validator). These directives would help in doing custom validation against any function defined on the scope. These directives support

1. Validation function which return boolean value.
2. Validation function which return promise, which must be resolved to boolean value.
3. Multiple validation function per input element.
4. Uses the standard AngularJS validation mechanism and hence can be integrated with validation-messages directive.

Usage

For local validation

Local validation (custom-validator directive)

To use this directive create a validation function on your scope.

This can be a method that returns true or false based on validation result

[gist]https://gist.github.com/chandermani/9447502[/gist]

Then declare the directive on the input element [gist]https://gist.github.com/chandermani/9447787[/gist]

The HTML attributes linked to this directive are

1. custom-validator : Name of the directive or error keys. Can be comma separated value, if multiple validations needs to be performed.
2. validate-functions : Comma separated list of validation function names defined on the scope. When the validation fail the error keys defined in custom-validator attribute is set in the form controller $error object map.

For remote validation

Remote validation (custom-remote-validator directive)

For remote validation define a function on scope that return a promise which in future resolves to true or false value.

[gist]https://gist.github.com/chandermani/9447608[/gist]

Once the validation functions is in place, apply the directive to the input field

[gist]https://gist.github.com/chandermani/9447921[/gist]

It has similar HTML attributes as custom-validator class. In this example we also added a update-on-blur directive to input which allows model update to trigger only when the input looses focus. This become necessary for remote validation as we would not want to make a remote call every time user types a character.

Which brings us to our last directive update-on-blur

Update model on blur directive (update-on-blur)

This was lifted from this SO post. The basic idea here is to update model values only when the input field looses focus as against changing the model every time user types something. This is helpful for scenarios where validation is an expensive operation or requires remote calls.

We hope you find this library directives useful. Feel free to reach out to us for any clarification on these directives.

To end this post this is not the only attempt to make validations easy on AngularJS. Some other projects that we looked at are

1. angular-validation
2. angular-validator
3. angular-ui-form-validation
4. ui-validate