Skip to content
This repository has been archived by the owner on Jul 1, 2020. It is now read-only.

HOWTO Step by Step

Jump to bottom
Ghislain B edited this page Mar 23, 2017 · 45 revisions

1. Dependencies

2. Installing it through a Package Manager

Bower
// bower install with
bower install angular-validation-ghiscoding
NPM
// NPM install with
npm install angular-validation-ghiscoding
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>

Note: The NuGet package uses AngularJS.Core and AngularJS.Route as depencies, but since AngularJS as multiple NuGet packages available, just make sure to not overwrite, or install in double, your AngularJS package. Choose whichever AngularJS package, as long as you have it, that's all it matters.

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>
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 modules to your App

// 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');
});

Do not mix your own locale translations with the Angular-Validation locales

If you use Angular-Translate in your own project, please make sure to define your translations outside of the ones used by Angular-Validation, to avoid unhappy surprises of overwriting your own translations. To use multiple translations, you can write it this way:

$translateProvider.useStaticFilesLoader({
  files: [{
      prefix: 'Scripts/angular-validation/locales/',
      suffix: '.json'
    }, 
    {
      prefix: 'yourOwnTranslationFolder/locales/',
      suffix: '.json'
    }]
  });

For more details about Angular-Translate File Loader, you can go on their website Angular-Translate Asynchronous loading

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 functionalities, so make sure to review 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!!!

Contents

Clone this wiki locally