HOWTO Step by Step

###1. Dependencies

1. Angular-Translate
2. [Angular-Translate JSON loader] (https://github.com/angular-translate/bower-angular-translate-loader-static-files)
3. Bootstrap 3.x is optional
4. AngularJS 1.2.x / 1.3.x

###2. Installing it through a Package Manager ######Bower

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

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

######NuGet (see the NuGet Package Here)

PM> Install-Package Angular-Validation-Ghiscoding

When used with IIS, also make sure to map the JSON type in your Web.Config

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

###3. Include all Scripts depencies ######Bower

<!-- Angular-Translate with the JSON loader -->
<script type="text/javascript" src="/bower_components/angular-translate/angular-translate.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>

<!-- Angular-Validation library -->
<script type="text/javascript" src="/bower_components/angular-validation-ghiscoding/dist/angular-validation.min.js"></script>

<!-- OR use uncompressed files for development, which are angular-validation, the directive and service are totally independent -->
<!-- you can load one or the other or use them in parallel. But `-common.js` and `-rules.js` are mandatory. -->
<script type="text/javascript" src="/bower_components/angular-validation-ghiscoding/src/validation-directive.js"></script>
<script type="text/javascript" src="/bower_components/angular-validation-ghiscoding/src/validation-service.js"></script>
<script type="text/javascript" src="/bower_components/angular-validation-ghiscoding/src/validation-common.js"></script>
<script type="text/javascript" src="/bower_components/angular-validation-ghiscoding/src/validation-rules.js"></script>

######NuGet

<!-- Angular-Translate with the JSON loader -->
<script type="text/javascript" src="Scripts/angular-translate.min.js"></script>
<script type="text/javascript" src="Scripts/angular-translate-loader-static-files.min.js"></script>

<!-- Angular-Validation library -->
<script type="text/javascript" src="Scripts/angular-validation/angular-validation.min.js"></script>

###4. Angular App You need to inject both the Angular-Validation and Angular-Translate to your App module

// include it your app module ( we need both Translate & Validation)
var myApp = angular.module('myApp', ['ghiscoding.validation', 'pascalprecht.translate']);

###5. Configure the Angular-Translate Provider (JSON) Angular-Validation uses the popular Angular-Translate to load and use locale translations for error displaying. You need to configure the provider by simply pointing it to the Angular-Validation locale JSON files. ######Bower

// include validation languages
// if you want full localization add it in the suffix
// For example on Canadian French/English, we could replace the code by `suffix: '-CA.json'`
myApp.config(function ($translateProvider) {
  $translateProvider.useStaticFilesLoader({
    prefix: '/bower_components/angular-validation-ghiscoding/locales/validation/',
    suffix: '.json'
  });

  // define translation maps you want to use on startup
  $translateProvider.preferredLanguage('en');
});

######NuGet

// include validation languages
// if you want full localization add it in the suffix
// For example on Canadian French/English, we could replace the code by `suffix: '-CA.json'`
myApp.config(function ($translateProvider) {
  $translateProvider.useStaticFilesLoader({
    prefix: 'Scripts/angular-validation/locales/',
    suffix: '.json'
  });

  // define translation maps you want to use on startup
  $translateProvider.preferredLanguage('en');
});

###6. CSS Styling You could optionally add some styling to your elements, I personally prefer to have my valid elements with a green border and my invalid elements with a red border and red italic text

Note: If you want red border around your input, make sure to make it show after it's dirty and touched by using the CSS ng-dirty and ng-touched. So for my personal config, I use the following CSS:

/* AngularJS Form validation styling */
.validation.help-block {
    color: #E07676;
    font-style: italic;
}

/* invalid & (dirty or touched) => red -- CSS3 only */
.ng-invalid.ng-dirty:not(:focus),
.ng-invalid.ng-touched:not(:focus) {
    border-color: #e74c3c;
}

/* valid & dirty => green */
.ng-valid.ng-dirty.ng-touched {
    border-color: #2ecc71;
}

/* error display font italic, text-danger is red in BS */
.validation.text-danger {
    font-style: italic;
}

###7. Requirements on Form Inputs Angular-Validation requires the element which will use validation to have an html name attribute (if omitted, it will throw an error in the console) so that in the background, the library can use this name to create and show an error into a <span> which will show just below your input element. For example:

<input name="input1" ng-model="input1" validation="required" />.

For more examples, please refer to the Wiki documentation Directive Examples and Service Examples

###8. Angular-Validation Directive The most common way to use Angular-Validation is through a Directive, and this is so easy, just define the validators you want with the validation="" attribute and that's it, the library will take care of the rest (errors will automatically be displayed in your chosen locale translation just below your input). Here is some quick examples:

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

For more example, see the Wiki documentation Directive Examples

###9. Angular-Validation Service To use the validationService you will need to inject it as well in your Controller since that is the way to use a Service

// inject the validationService inside your Controller
myApp.controller('Ctrl', function ($scope, validationService) {
    var myValidation = new validationService();
});

or if you want to minify your code, you'll need to write it this way

// inject the validationService inside your Controller
myApp.controller('Ctrl', ['$scope', 'validationService', function ($scope, validationService) {
    var myValidation = new validationService();
}]);

For more example, see the Wiki documentation Service Examples

###10. ControllerAs Syntax You might be interested in the ControllerAs syntax, for more details just go on the Wiki documentation ControllerAs syntax

###11. Validators The list of validators is available in the Wiki document Available Validators (rules) and you could also define your own Custom Regular Expression rules.

###12. Start coding That would be it for the step by step, you can start using Angular-Validation. This library has a lot of functionality, so make sure to check in all the Wiki sections before opening an issue. Enjoy the library and please click on the Star and make it your favorite if you like the library. Thank you!!!