Angular Validation (Directive / Service)

Version: 1.5.26

Project in Life Support

still accepting PR for any bug fix

This project is now in Life Support since most of us already moved to newer version of Angular. However I do want to point out that if you still use the lib and find a Bug, I certainly still welcome PR (Pull Request) to address bug fixes. So I'm not totally gone but I won't personally invest more time in the lib. Also note that the lib will not be rewritten to support Angular 2+

On a totally different note, I'm still very active in the Angular 4+ world (even Aurelia world) and you might be interested in looking at some of my other libraries.

In the Aurelia world

Forms Validation with Angular made easy!

(Concept comes from the amazing Laravel)

Form validation after user stop typing (debounce default of 1sec). Angular-Validation is an angular directive/service with locales (languages) with a very simple approach of defining your validation="" directly within your element to validate (input, textarea, etc) and...that's it!!! The directive/service will take care of the rest!

The base concept is not new, it comes from the easy form input validation approach of Laravel Framework as well as PHP Gump Validation. They are both PHP frameworks and use a very simple approach, so why not re-use the same concept over Angular as well? Well it's now made available with a few more extras.

For a smoother user experience, I also added validation on inactivity (timer/debounce). So validation will not bother the user while he is still typing... though as soon as the user pauses for a certain amount of time, then validation comes into play. It's worth knowing that this inactivity timer is only available while typing, if user focuses away from his input (onBlur) it will then validate instantly.

Supporting AngularJS 1.3.x-1.5.x branch (current code should work with 1.2.x just the same, but is no more verified)

Now support Service using the same functionalities as the Directive. Huge rewrite to have a better code separation and also adding support to Service functionalities. Specifically the validation-rules was separated to add rules without affecting the core while validation-common is for shared functions (shared by Directive/Service).

Validation Summary was also recently added to easily show all validation errors that are still active on the form and you can also use 2 ways of dealing with the Submit and Validation button.

For more reasons to use it, see the answered question of: Why Use It?

If you like the Angular-Validation project and you use it, please click on the ⭐ and add it as a favorite. The more star ratings there is, the more chances it could be found by other users inside the popular trend section. That is the only support I ask you... thanks and enjoy it ;)

Live Demo

Plunker

Tested with Protractor

Angular-validation now has a full set of End-to-End tests with Protractor, there is over 1800+ assertions, it starts by testing the original live demo page and then goes on with a complete test suite of All Validators in both the Angular-Validation Directive and Service.

Why use angular-validation?

Angular-validation was develop with simplicity and DRY (Don't Repeat Yourself) concept in mind. You can transform this:

<input type="text" name="username" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required />
<div ng-show="form.$submitted || form.user.$touched">
  <span ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
  <span ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<input type="text" name="firstname" ng-model="user.firstname" ng-minlength="3" ng-maxlength="50" required />
<div ng-show="form.$submitted || form.user.$touched">
  <span ng-show="userForm.firstname.$error.minlength" class="help-block">Firstname is too short.</p>
  <span ng-show="userForm.firstname.$error.maxlength" class="help-block">Firstname is too long.</p>
</div>
<input type="text" name="lastname" ng-model="user.lastname" ng-minlength="2" ng-maxlength="50" required />
<div ng-show="form.$submitted || form.user.$touched">
  <span ng-show="userForm.lastname.$error.minlength" class="help-block">Lastname is too short.</p>
  <span ng-show="userForm.lastname.$error.maxlength" class="help-block">Lastname is too long.</p>
</div>

into the following (errors will automatically be displayed in your chosen locale translation):

<input type="text" name="username" ng-model="user.username" validation="min_len:3|max_len:8|required"  />
<input type="text" name="firstname" ng-model="user.firstname" validation="alpha_dash|min_len:3|max_len:50|required"  />
<input type="text" name="lastname" ng-model="user.lastname" validation="alpha_dash|min_len:2|max_len:50|required"  />

The Angular-Validation will create, by itself, the necessary error message. Now imagine your form having 10 inputs, using the documented Angular way will end up being 30 lines of code, while on the other hand Angular-Validation will stay with 10 lines of code, no more... so what are you waiting for? Use Angular-Validation!!! Don't forget to add it to your favorite, click on the ⭐ on top :)

Let's not forget the Validation Summary which is also a great and useful way of displaying your errors to the user.

Another awesome feature recently added is the Wiki - Remote Validation (AJAX) which is useful for backend server validation.

Again another recently added feature, external 3rd party addon validation (like ngTagsInput or Angular Multi-Select), take a look at the Wiki - 3rd party addon validation

Angular-Validation Wiki

All the documentation has been moved to the Wiki section, see the github wiki for more explanation. If you just started with the library, then the most important page to read would be the HOWTO - Step by Step

Wiki Contents

Angular-Validation Wiki
Installation
- HOWTO - Step by Step
- Bower/NPM/NuGet Packages
- Locales (languages)
Code Samples
Functionalities
Custom Validations
- Custom Validation (JS)
- Remote Validation (AJAX)
Properties & Options
Validators
- Available Validator Rules
- Custom Regular Expression Pattern
Misc
- Changelog
- License

Download and Install it

Install with Bower

// bower install with
bower install angular-validation-ghiscoding

Install with NPM

// NPM install with
npm install angular-validation-ghiscoding

Install with NuGet (see the NuGet Package Here)

PM> Install-Package Angular-Validation-Ghiscoding

When used with IIS, you will need to map the JSON type

<staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

License

MIT License

Available Validator Rules

All validators are written as snake_case but it's up to the user's taste and could also be used as camelCase. So for example alpha_dash_spaces and alphaDashSpaces are both equivalent.

NOTE: on an `input type="number"`, the `+` sign is an invalid character (browser restriction) even if you are using a `signed` validator. If you really wish to use the `+`, then change your input to a `type="text"`.

License

sajithawattage/angular-validation

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages