Getting Started

For the best overview of the module and module architecture see my original blog post here.

Or

See the basic working Plunker here.

See radio and checkboxes getting validated here

See Async Validators and setting external validation message i.e. after a service call here

Install and manage Angular-Auto-Validate with Bower:

$ bower install angular-auto-validate --save

Load the required javascript libraries:

<script src="bower_components/angular-auto-validate/dist/jcs-auto-validate.min.js"></script>

Inject the jcs-auto-validate into your application:

angular.module('my-app', ['jcs-autoValidate']);

If you are using Bootstrap3, that's it, unless you wish the valid and invalid states of your controls to be indicated via icons, otherwise auto-validate is setup!:

angular.module('my-app')
        .run([
        'bootstrap3ElementModifier',
        function (bootstrap3ElementModifier) {
              bootstrap3ElementModifier.enableValidationStateIcons(true);
       }]);

If you are using Foundation5, you will need to set the Foundation5 element modifier as the default one:

angular.module('my-app')
       .run([
       'validator',
       'foundation5ElementModifier',
       function (validator, foundation5ElementModifier) {
           validator.setDefaultElementModifier(foundation5ElementModifier.key);
       }]);

If you are not using Bootstrap3 or Foundation5, you will need to create a custom element modifier so see the below section.