#Angular Validation (Directive / Service) Version: 1.3.22

Forms Validation with Angular made easy! 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 both are built in PHP and use a very simple approach, so why not use the same concept over Angular as well? Well now it is available with 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 (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 do use it, please click on the Star and add it as a favourite. The more star ratings there is, the more chances it could found by other users as a populate trend. That is the only support I ask you... thanks ;)

Plunker

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 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 with 10 inputs, using the Angular-Validation will end up using 10 lines of code, while on the other hand using the default of Angular will give you 30 lines of code... so what are you waiting for? Use Angular-Validation!!! :)

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

All the documentation has been moved to the Wiki section, see the github wiki for more explanation.

Wiki Contents

• Angular-Validation Wiki
• Installation
  • Bower/NuGet Packages
  • Include it in your Angular Application project
  • Locales (languages)
• Code Samples
  • Directive Examples
  • Service Examples
  • Alternate Text on Validators
  • DisplayErrorTo
  • Submit and Validation
  • Validation Summary
• Validators
  • Available Validator Rules
  • Regular Expression
• Misc
  • Changelog
  • License

Install with Bower

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

// or as another alias
bower install ghiscoding.angular-validation

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