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. ######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, so that in the background it can use this name to create and show an error into a <span> which will directly follow your form input. For example: <input name="input1" ng-model="input1" validation="required" />.

The necessity of name="" attribute is new since version 1.3.4+, prior to this change we were asking the user to create his own <span> for error displaying. In other words, the <span> is now optional, but the name="" attribute becomes mandatory and will throw an error if omitted

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. 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. Thanks!!!