├── .gitignore
├── .travis.yml
├── CONTRIBUTING.md
├── Gruntfile.js
├── README.md
├── bower.json
├── demo
    ├── app.js
    └── index.html
├── dist
    ├── angular-validator.js
    └── angular-validator.min.js
├── karma.conf.js
├── package.json
├── src
    └── angular-validator.js
└── test
    └── angular-validator-spec.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components
3 | npm-debug.log


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false  # use container-based virtualization environment
 2 | language: node_js
 3 | node_js:
 4 |   - "6"  # Node.js LTS maintained until April 2019, https://github.com/nodejs/lts
 5 |   - "node"  # latest stable Node.js release
 6 | before_script:
 7 |   - export DISPLAY=:99.0
 8 |   - sh -e /etc/init.d/xvfb start
 9 |   - 'npm install -g bower grunt-cli'
10 |   - 'bower install --config.interactive=false'
11 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | Thanks for wanting to contribute. Please follow the instructions below.
 3 | 
 4 | 
 5 | ## Getting started
 6 | 1. Clone the repository
 7 | 2. Run `bower install` in the repository directory
 8 | 3. Run `npm install` in the repository directory
 9 | 4. Run `grunt serve` to start serving the demo on `http://localhost:9001/demo/`
10 | 
11 | 
12 | ## Before creating a pull request
13 | 1. Make sure you add tests to `/test/angular-validator-spec.js` that test your changes. To run tests `grunt test`
14 | 2. If appropriate update the README to reflect your changes.
15 | 3. Run `grunt build` to minify and create a `dist` version of your changes
16 | 4. If appropriate update the demo in /demo/
17 | 5. The project maintainer will update the Plunker demo that is linked in README.md if needed.


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
  1 | /*jslint node: true */
  2 | 'use strict';
  3 | 
  4 | var pkg = require('./package.json');
  5 | 
  6 | module.exports = function(grunt) {
  7 | 
  8 |     // Grunt Config
  9 |     grunt.initConfig({
 10 |         pkg: grunt.file.readJSON('package.json'),
 11 | 
 12 |         connect: {
 13 |             server: {
 14 |                 options: {
 15 |                     port: 9001,
 16 |                     base: '.'
 17 |                 }
 18 |             }
 19 |         },
 20 |         concat: {
 21 |             "options": {
 22 |                 "separator": ";"
 23 |             },
 24 |             "build": {
 25 |                 "src": "src/*.js",
 26 |                 "dest": "dist/angular-validator.js"
 27 |             }
 28 |         },
 29 |         ngAnnotate: {
 30 |             main: {
 31 |                 src: 'dist/angular-validator.js',
 32 |                 dest: 'dist/angular-validator.js'
 33 |             },
 34 |         },
 35 |         uglify: {
 36 |             dist: {
 37 |                 src: "dist/angular-validator.js",
 38 |                 dest: "dist/angular-validator.min.js"
 39 |             }
 40 |         },
 41 |         jshint: {
 42 |             files: ['Gruntfile.js', 'src/*.js'],
 43 |             options: {
 44 |                 jshintrc: true
 45 |             }
 46 |         },
 47 |         watch: {
 48 |             files: ['src/*.js', 'demo/*.*'],
 49 |             tasks: ['build'],
 50 |             options: {
 51 |                 livereload: true
 52 |             }
 53 |         },
 54 |         karma: {
 55 |             options: {
 56 |                 configFile: 'karma.conf.js'
 57 |             },
 58 |             build: {
 59 |                 singleRun: true,
 60 |                 autoWatch: true
 61 |             },
 62 |             debug: {
 63 |                 singleRun: false,
 64 |                 autoWatch: true,
 65 |                 browsers: ['Chrome']
 66 |             },
 67 |             travis: {
 68 |                 singleRun: true,
 69 |                 autoWatch: false,
 70 |                 browsers: ['Firefox']
 71 |             },
 72 |             dev: {
 73 |                 autoWatch: true
 74 |             }
 75 |         }
 76 |     });
 77 | 
 78 |     grunt.loadNpmTasks('grunt-contrib-watch');
 79 |     grunt.loadNpmTasks('grunt-contrib-connect');
 80 |     grunt.loadNpmTasks('grunt-ng-annotate');
 81 | 
 82 |     // Load the plugin that provides the "jshint" task.
 83 |     grunt.loadNpmTasks('grunt-contrib-jshint');
 84 | 
 85 |     // Load the plugin that provides the "concat" task.
 86 |     grunt.loadNpmTasks('grunt-contrib-concat');
 87 | 
 88 |     // Load the plugin that provides the "uglify" task.
 89 |     grunt.loadNpmTasks('grunt-contrib-uglify');
 90 |     grunt.loadNpmTasks('grunt-karma');
 91 | 
 92 | 
 93 | 
 94 |     // Register Task
 95 |     grunt.registerTask('serve', ['connect', 'watch']);
 96 |     grunt.registerTask('build', ['concat', 'ngAnnotate', 'uglify', 'karma:build']);
 97 |     grunt.registerTask('test', ['karma:build', ]);
 98 |     grunt.registerTask('test-debug', ['karma:debug']);
 99 |     grunt.registerTask('travis', ['karma:travis']);
100 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Angular-Validator 
  2 | [![Build Status](https://travis-ci.org/turinggroup/angular-validator.png)](https://travis-ci.org/turinggroup/angular-validator)
  3 | 
  4 | Angular-Validator is an easy to use, powerful and lightweight AngularJS validation directive.
  5 | 
  6 | ## Demo
  7 | [Check out the demo!](http://plnkr.co/edit/XbDYKrM2QUf8g1ubTHma?p=preview)
  8 | 
  9 | ## Features
 10 | * Validate using regex, HTML5, or custom validation functions.
 11 | * Works seamlessly with all native AngularJS validation directives and native HTML5 validation attributes.
 12 | * Supports custom validation message templates and placement using Angular's native `ngMessages` directive.
 13 | * Choose when to validate elements, on per-element basis. Choose between on form `submission`, `blur` or `dirty`(change).
 14 | * All validation states and validation messages are accessible through `$scope.yourFormName.elementName`. 
 15 | * Prevents submission if the form is invalid
 16 | * Built in `reset()` form method
 17 | * Supports multi-field dependent validation (one field depends on another such as password matching)
 18 | * Works with Bootstrap out of the box (although Bootstrap is not required)
 19 | * Optionally adds `.has-error` classes to invalid form and message message elements so you don't have to.
 20 | * Supports form invalid message service where manage invalid messages in one place and save code in HTML
 21 | 
 22 | ## Why?
 23 | Despite Angular's awesomeness, validation in Angular is still annoying. Surprisingly there are no seamless, user-friendly, well written Angular validation tools. Unlike other Angular validation tools, Angular-Validator works with out-of-the-box Angular and HTML5 validation, directives and attributes, allowing your forms to work well with the browser and other Javascript code. 
 24 | 
 25 | ## Installation
 26 | 1. Using bower:  `bower install tg-angular-validator`.
 27 | 2. Include `angular-validator.min.js`.
 28 | 3. Add `angularValidator` as a dependency of your Angular module.
 29 | 
 30 | ## Usage
 31 | 
 32 | **Basic usage for required fields**
 33 | ```
 34 | <input  type = "text"
 35 |         name = "firstName"
 36 |         ng-model = "person.firstName"
 37 |         required>
 38 | ```
 39 | 
 40 | **Usage with a custom validator function**
 41 | ```
 42 | <input  type = "text"
 43 |         name = "firstName"
 44 |         ng-model = "person.firstName"
 45 |         validator = "myValidationFunction(person.firstName)">
 46 | ```
 47 | 
 48 | **Usage with validation on blur**
 49 | ```
 50 | <input  type = "text"
 51 |         name = "firstName"
 52 |         ng-model = "person.firstName"
 53 |         validate-on="blur"
 54 |         validator = "myValidationFunction(person.firstName)">
 55 | ```
 56 | 
 57 | **Usage with validation on dirty**
 58 | ```
 59 | <input  type = "text"
 60 |         name = "firstName"
 61 |         ng-model = "person.firstName"
 62 |         validate-on="dirty"
 63 |         validator = "myValidationFunction(person.firstName)">
 64 | ```
 65 | 
 66 | **Usage with custom validator literal**
 67 | ```
 68 | <input  type = "text"
 69 |         name = "firstName"
 70 |         ng-model = "person.firstName"
 71 |         validator = "person.firstname === 'john'">
 72 | ```
 73 | 
 74 | **Usage with REGEX and required**
 75 | ```
 76 | <input  type = "text"
 77 |         name = "firstName"
 78 |         ng-model = "person.firstName"
 79 |         ng-pattern = "/regex/"
 80 |         required>
 81 | ```
 82 | 
 83 | **Usage with custom error message text**
 84 | ```
 85 | <input  type = "text"
 86 |         name = "firstName"
 87 |         ng-model = "person.firstName"
 88 |         ng-pattern = "/regex/"
 89 |         invalid-message = "'Please enter the word regex'"
 90 |         required-message = "'First name is required'"
 91 |         required>
 92 | ```
 93 | 
 94 | **Usage with conditional invalid/required message text**
 95 | ```
 96 | <input  type = "text"
 97 |         name = "firstName"
 98 |         ng-model = "person.firstName"
 99 |         validator= "myValidationFunction(person.firstName) === true"
100 |         invalid-message = "myValidationFunction(person.firstName)"
101 |         required-message = "myValidationFunction(person.firstName)"
102 |         required>
103 | ```
104 | * Note that the validator and the message function do not need to be the same function. If you choose to make them the same function make sure to return `true` on valid input.  
105 | 
106 | **Usage without auto-generated error label**
107 | 
108 | ```
109 | <input  type = "text"
110 |         name = "firstName"
111 |         ng-model = "person.firstName"
112 |         validator= "myValidationFunction(person.firstName) === true"
113 |         required
114 |         angular-validator-quiet>
115 | ```
116 | 
117 | Use `angular-validator-quiet` on an element to prevent the auto-generation of new DOM element `label` after this inputs. You then have complete control over the location and classes used to show the error messages.
118 | 
119 | **Setting up the form**
120 | ```
121 | <form novalidate angular-validator angular-validator-submit='myOnSubmitFunction()' name='myFormName'>
122 |     ....
123 |     ....
124 |     <button type='submit'>Submit</button>
125 | </form>
126 | ```
127 | Use `angular-validator-submit` to specify the function to be called when the form is submitted. Note that the function is not called if the form is invalid.
128 | 
129 | 
130 | **Use form invalid message service**
131 | ```
132 | <form novalidate angular-validator invalid-message='customMessage' angular-validator-submit='submitMyForm()' name='myFormName'>
133 |         <input  type='text'
134 |                 name='firstName'
135 |                 validate-on='dirty'
136 |                 ng-model='firstName'>
137 | </form>
138 | ```
139 | Use `invalid-message` on form element to provide the name of the service in which invalid messages are managed. You need to provide a `message` function in your service, which returns the messages you defined. Form invalid message service saves repetitive code in HTML because you do not need to use invalid-message attribute on every field. Please see the demo for examples.
140 | 
141 | **Usage form without auto-generated error label**
142 | 
143 | ```
144 | <form novalidate angular-validator angular-validator-submit="submitMyForm()" name="myFormName" angular-validator-quiet>
145 | ```
146 | 
147 | Use `angular-validator-quiet` on form element to prevent the auto-generation of new DOM element `label` after all of this forms inputs.
148 | 
149 | **Resetting the form**
150 | ```
151 | myFormName.reset()
152 | ```
153 | *You need to include a `name` attribute on the form to use this.*
154 | 
155 | 
156 | **Validity API**
157 | Uses standard Angular `$valid` and `$invalid` properties so that it can work with core angular and third party libraries!
158 | ```
159 | formName.$invalid
160 | formName.$valid
161 | elementName.$valid
162 | elementName.$invalid
163 | elementName.$angularValidator
164 | ```
165 | 
166 | ## FAQ
167 | **It's not working!?**
168 | Make sure you have assigned a unique name to each form element as well as the form itself. Make sure you have properly followed the installation instructions.
169 | 
170 | **Why pass value to custom validator functions?**
171 | Passing the value to the custom validator function allows the function to be easier to test.
172 | 
173 | **How do I display success messages/classes?**
174 | The library does not currently support success classes and messages. Feel free to contribute.
175 | 
176 | **What if I want error messages to display before the user types anything?**
177 | You are using the wrong library.
178 | 
179 | **What if I want to disable the submit button if the form is invalid?**
180 | You can add `ng-disabled="myForm.$invalid"` on the submit button.
181 | 
182 | 
183 | ## CONTRIBUTING
184 | See CONTRIBUTING.md
185 | 
186 | ## License
187 | MIT
188 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tg-angular-validator",
 3 |   "version": "1.2.10",
 4 |   "authors": [
 5 |     "Zohar Jackson <zohar@turinggroup.com>"
 6 |   ],
 7 |   "main": "./dist/angular-validator.js",
 8 |   "description": "An easy to use, powerful and lightweight AngularJS validation directive.",
 9 |   "keywords": [
10 |     "AngularJS",
11 |     "validation",
12 |     "angular validation",
13 |     "form validation",
14 |     "angular",
15 |     "validator",
16 |     "client-side"
17 |   ],
18 |   "license": "MIT",
19 |   "ignore": [
20 |     "**/.*",
21 |     "node_modules",
22 |     "bower_components",
23 |     "test",
24 |     "src",
25 |     "demo",
26 |     "bower.json",
27 |     "gruntfile.js",
28 |     "package.json",
29 |     "README.md",
30 |     "karma.conf.js"
31 |   ],
32 |   "dependencies": {
33 |     "angular": ">=1.3.0",
34 |     "jquery": "~2.1.4"
35 |   },
36 |   "devDependencies": {
37 |     "angular-mocks": "^1.6.2",
38 |     "angular-messages": "^1.6.2"
39 |   },
40 |   "homepage": "https://github.com/turinggroup/angular-validator"
41 | }
42 | 


--------------------------------------------------------------------------------
/demo/app.js:
--------------------------------------------------------------------------------
 1 | angular.module('angular-validator-demo', ['angularValidator', 'ngMessages']);
 2 | 
 3 | 
 4 | angular.module('angular-validator-demo').controller('DemoCtrl', function($scope) {
 5 | 
 6 | 	$scope.submitMyForm = function() {
 7 | 		alert("Form submitted");
 8 | 	};
 9 | 
10 | 
11 | 	$scope.myCustomValidator = function(text) {
12 | 		return true;
13 | 	};
14 | 
15 | 
16 | 	$scope.anotherCustomValidator = function(text) {
17 | 		if (text === "rainbow") {
18 | 			return true;
19 | 		} else return "type in 'rainbow'";
20 | 	};
21 | 
22 | 
23 | 	$scope.passwordValidator = function(password) {
24 | 
25 | 		if (!password) {
26 | 			return;
27 | 		}
28 | 		else if (password.length < 6) {
29 | 			return "Password must be at least " + 6 + " characters long";
30 | 		}
31 | 		else if (!password.match(/[A-Z]/)) {
32 | 			return "Password must have at least one capital letter";
33 | 		}
34 | 		else if (!password.match(/[0-9]/)) {
35 | 			return "Password must have at least one number";
36 | 		}
37 | 
38 | 		return true;
39 | 	};
40 | }).factory('customMessage', function () {
41 |     // invalid message service with message function
42 |     return {
43 |         // scopeElementModel is the object in scope version, element is the object in DOM version
44 |         message: function (scopeElementModel, element) {
45 |             var errors = scopeElementModel.$error;
46 |             if (errors.maxlength) {
47 |                 // be careful with the quote
48 |                 return "'Should be no longer than " + element.attributes['ng-maxlength'].value + " characters!'";
49 |             } else {
50 |                 // default message
51 |                 return "'This field is invalid!'";
52 |             }
53 |         }
54 |     };
55 | });


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <html ng-app="angular-validator-demo">
  2 | <head>
  3 |     <title>Angular-Validator Demo</title>
  4 |     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  5 |     <style>
  6 |         h4 {color:  rgb(255, 128, 0);}
  7 |     </style>
  8 | </head>
  9 | 
 10 | <body ng-controller="DemoCtrl">
 11 |     <div class="container">
 12 |         <h1>Angular-Validator Demo</h1>
 13 |         <a href="https://github.com/turinggroup/angular-validator">https://github.com/turinggroup/angular-validator</a>
 14 |         <hr>
 15 |         <form angular-validator-submit="submitMyForm()" name="myForm" class="form-horizontal" novalidate angular-validator>
 16 |             <h4>Choose when to validate:</h4>
 17 |             <div class="form-group">
 18 |                 <label class="col-sm-2 control-label">On dirty validation</label>
 19 |                 <div class="col-sm-10">
 20 |                     <input  type = "text"
 21 |                         name = "dirty"
 22 |                         validate-on="dirty"
 23 |                         class = "form-control"
 24 |                         ng-model = "form.dirty"
 25 |                         ng-pattern="/regex/"
 26 |                         invalid-message="'You must enter the word `regex`'"
 27 |                         required-message="'Yo! This field is required..'"
 28 |                         required></div>
 29 |             </div>
 30 |             <div class="form-group">
 31 |                 <label class="col-sm-2 control-label">On blur validation</label>
 32 |                 <div class="col-sm-10">
 33 |                     <input  type = "text"
 34 |                         name = "blur"
 35 |                         validate-on="blur"
 36 |                         class = "form-control"
 37 |                         ng-model = "form.blur"
 38 |                         ng-pattern="/regex/"
 39 |                         invalid-message="'You must enter the word `regex`'"
 40 |                         required-message="'Yo! This field is required..'"
 41 |                         required></div>
 42 |             </div>
 43 |             <div class="form-group">
 44 |                 <label class="col-sm-2 control-label">On submit validation</label>
 45 |                 <div class="col-sm-10">
 46 |                     <input  type = "text"
 47 |                         name = "sub"
 48 |                         class = "form-control"
 49 |                         ng-model = "form.sub"
 50 |                         ng-pattern="/regex/"
 51 |                         invalid-message="'You must enter the word `regex`'"
 52 |                         required-message="'Yo! This field is required..'"
 53 |                         required></div>
 54 |             </div>
 55 | 
 56 |             <hr>
 57 |             <h4>Different types of validation:</h4>
 58 | 
 59 |             <div class="form-group">
 60 |                 <label class="col-sm-2 control-label">Custom validation Function</label>
 61 |                 <div class="col-sm-10">
 62 |                     <input  type = "text"
 63 |                             name = "firstName"
 64 |                             class = "form-control"
 65 |                             ng-model = "form.firstName"
 66 |                             validator = "myCustomValidator(form.firstName)"
 67 |                             validate-on="dirty"
 68 |                             required></div>
 69 |             </div>
 70 |             <div class="form-group">
 71 |                 <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 72 |                 <div class="col-sm-10">
 73 |                     <input  type = "email"
 74 |                             name = "emailAddress"
 75 |                             class = "form-control"
 76 |                             ng-model = "form.emailAddress"
 77 |                             invalid-message="'Thats not a real email address'"
 78 |                             required-message="'Yo this is required'"
 79 |                             validate-on="dirty"
 80 |                             required></div>
 81 |             </div>
 82 |             <div class="form-group">
 83 |                 <label class="col-sm-2 control-label">Regex</label>
 84 |                 <div class="col-sm-10">
 85 |                     <input  type = "text"
 86 |                             name = "regex"
 87 |                             class = "form-control"
 88 |                             ng-model = "form.regex"
 89 |                             ng-pattern="/regex/"
 90 |                             invalid-message="'You must enter the word `regex`'"
 91 |                             required-message="'Yo! This field is required..'"
 92 |                             validate-on="dirty"
 93 |                             required></div>
 94 |             </div>
 95 |             <div class="form-group">
 96 |                 <label class="col-sm-2 control-label">Custom message Function</label>
 97 |                 <div class="col-sm-10">
 98 |                     <input  type = "text"
 99 |                             name = "myField"
100 |                             class = "form-control"
101 |                             ng-model = "form.myField"
102 |                             validator = "anotherCustomValidator(form.myField) === true"
103 |                             invalid-message = "anotherCustomValidator(form.myField)"
104 |                             validate-on="dirty"
105 |                             required></div>
106 |             </div>
107 |             <hr>
108 | 
109 |             <h4>Password validation and password matching example</h4>
110 |             <div class="form-group">
111 |                 <label class="col-sm-2 control-label">Password</label>
112 |                 <div class="col-sm-10">
113 |                     <input  type = "password"
114 |                             name = "password"
115 |                             class = "form-control"
116 |                             ng-model = "form.password"
117 |                             validator = "passwordValidator(form.password) === true"
118 |                             invalid-message = "passwordValidator(form.password)"
119 |                             validate-on="dirty"
120 |                             required></div>
121 |             </div>
122 |             <div class="form-group">
123 |                 <label class="col-sm-2 control-label">Confirm Password</label>
124 |                 <div class="col-sm-10">
125 |                     <input  type = "password"
126 |                             name = "confirmPassword"
127 |                             class = "form-control"
128 |                             ng-model = "form.confirmPassword"
129 |                             validator = "form.password === form.confirmPassword"
130 |                             validate-on="dirty"
131 |                             invalid-message = "'Passwords do not match!'"
132 |                             required></div>
133 |             </div>
134 |             <hr>
135 |             <div class="form-group">
136 |                 <div class="col-sm-offset-2 col-sm-10">
137 |                     <button type="button" ng-click="myForm.reset()" class="btn btn-primary">Reset</button>
138 |                     <button type="submit" class="btn btn-primary">Submit</button>
139 |                 </div>
140 |             </div>
141 |         </form>
142 | 
143 | 
144 |         <form angular-validator-submit="submitMyForm()" name="myForm2" class="form-horizontal" novalidate angular-validator invalid-message="customMessage">
145 |             <h4>Form invalid message:</h4>
146 |             <div class="form-group">
147 |                 <label class="col-sm-2 control-label">Max length</label>
148 |                 <div class="col-sm-10">
149 |                     <input  type="text"
150 |                             name="firstName"
151 |                             class="form-control"
152 |                             validate-on="dirty"
153 |                             ng-model="form2.firstName"
154 |                             ng-maxlength="5"
155 |                             required></div>
156 |             </div>
157 |             <hr>
158 |             <h4>Field invalid message hides form invalid message</h4>
159 |             <div class="form-group">
160 |                 <label class="col-sm-2 control-label">Form vs Field</label>
161 |                 <div class="col-sm-10">
162 |                     <input  type="text"
163 |                             name="lastName"
164 |                             class="form-control"
165 |                             validate-on="dirty"
166 |                             ng-model="form2.lastName"
167 |                             ng-maxlength="6"
168 |                             invalid-message="'Too long!'"
169 |                             required></div>
170 |             </div>
171 |             <hr>
172 |             <div class="form-group">
173 |                 <div class="col-sm-offset-2 col-sm-10">
174 |                     <button type="button" ng-click="myForm2.reset()" class="btn btn-primary">Reset</button>
175 |                     <button type="submit" class="btn btn-primary">Submit</button>
176 |                 </div>
177 |             </div>
178 |         </form>
179 | 
180 |         <form angular-validator-submit="submitMyForm()" name="myForm3" class="form-horizontal" novalidate angular-validator >
181 |             <h4>Using Field angular-validator-quiet (with angular-messages)</h4>
182 |             <div class="form-group">
183 |                 <label class="col-sm-2 control-label">Field 1 max length 5</label>
184 |                 <div class="col-sm-10">
185 |                     <input  type="text"
186 |                             name="form3input"
187 |                             class="form-control"
188 |                             ng-model="form3input"
189 |                             ng-maxlength="5"
190 |                             required
191 |                             angular-validator-quiet></div>
192 |                 <div class="col-sm-12" ng-messages="myForm3.form3input.$error" ng-if="myForm3.submitted" ng-cloak="">
193 |                     <div class="alert alert-danger" ng-message="required">"Required" message with manual template</div>
194 |                     <div class="alert alert-danger" ng-message="maxlength">"Max Length" message with manual template</div>
195 |                 </div>
196 |             </div>
197 |             <div class="form-group">
198 |                 <label class="col-sm-2 control-label">Field 2 max length 5</label>
199 |                 <div class="col-sm-10">
200 |                     <input  type="text"
201 |                             name="form3input1"
202 |                             class="form-control"
203 |                             ng-model="form3input1"
204 |                             ng-maxlength="5"
205 |                             required></div>
206 |             </div>
207 |             <hr>
208 |             <div class="form-group">
209 |                 <div class="col-sm-offset-2 col-sm-10">
210 |                     <button type="button" ng-click="myForm3.reset()" class="btn btn-primary">Reset</button>
211 |                     <button type="submit" class="btn btn-primary">Submit</button>
212 |                 </div>
213 |             </div>
214 | 
215 |         </form>
216 | 
217 |         <form angular-validator-submit="submitMyForm()" name="myForm4" class="form-horizontal" novalidate angular-validator angular-validator-quiet>
218 |             <h4>Using Form angular-validator-quiet (with angular-messages)</h4>
219 |             <div class="form-group">
220 |                 <label class="col-sm-2 control-label">Field 1 max length 5</label>
221 |                 <div class="col-sm-10">
222 |                     <input  type="text"
223 |                             name="form4input"
224 |                             class="form-control"
225 |                             ng-model="form4input"
226 |                             ng-maxlength="5"
227 |                             required></div>
228 |                 <div class="col-sm-12" ng-if="myForm4.submitted" ng-messages="myForm4.form4input.$error" ng-cloak="">
229 |                     <div class="alert alert-danger" ng-message="required">"Required" message with manual template</div>
230 |                     <div class="alert alert-danger" ng-message="maxlength">"Max Length" message with manual template</div>
231 |                 </div>
232 |             </div>
233 |             <div class="form-group">
234 |                 <label class="col-sm-2 control-label">Field 2 max length 5</label>
235 |                 <div class="col-sm-10">
236 |                     <input  type="text"
237 |                             name="form4input2"
238 |                             class="form-control"
239 |                             ng-model="form4input2"
240 |                             ng-maxlength="5"
241 |                             required></div>
242 |                 <div class="col-sm-12" ng-if="myForm4.submitted" ng-messages="myForm4.form4input2.$error" ng-cloak="">
243 |                     <div class="alert alert-danger" ng-message="required">"Required" message with manual template</div>
244 |                     <div class="alert alert-danger" ng-message="maxlength">"Max Length" message with manual template</div>
245 |                 </div>
246 |             </div>
247 |             <hr>
248 |             <div class="form-group">
249 |                 <div class="col-sm-offset-2 col-sm-10">
250 |                     <button type="button" ng-click="myForm4.reset()" class="btn btn-primary">Reset</button>
251 |                     <button type="submit" class="btn btn-primary">Submit</button>
252 |                 </div>
253 |             </div>
254 | 
255 |         </form>
256 | 
257 |         <hr>
258 |         <h4> <u>Scope Sneak Peak</u>
259 |         </h4>
260 |         <p>Form valid: {{myForm.$valid}}</p>
261 |         <p>First Name valid: {{myForm.firstName.$valid}}</p>
262 |         <p>Email Valid: {{myForm.emailAddress.$valid}}</p>
263 |         <p>Password Valid: {{myForm.password.$valid}}  {{form.password}}</p>
264 |         <p>Regex Valid: {{myForm.regex.$valid}}</p>
265 |         <p>Form submitted: {{myForm.submitted}}</p>
266 | 
267 |     </div>
268 |     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
269 |     <script src="app.js"></script>
270 |     <script src="/bower_components/angular-messages/angular-messages.js"></script>
271 |     <script src="../dist/angular-validator.js"></script>
272 | 
273 | </body>
274 | </html>


--------------------------------------------------------------------------------
/dist/angular-validator.js:
--------------------------------------------------------------------------------
  1 | angular.module('angularValidator', []);
  2 | 
  3 | angular.module('angularValidator').directive('angularValidator', ['$injector', '$parse', '$compile',
  4 |     function($injector, $parse, $compile) {
  5 |         return {
  6 |             restrict: 'A',
  7 |             link: function(scope, element, attrs, fn) {
  8 |                 var getRandomInt = function() {
  9 |                     return Math.floor((Math.random() * 100000));
 10 |                 };
 11 | 
 12 |                 // For this directive to work the form needs a name attribute as well as every input element.
 13 |                 // This function will add names where missing
 14 |                 var need_to_recompile = false;
 15 | 
 16 |                 // Iterate through all the children of the form element and add a `name` attribute to the ones
 17 |                 // that are missing it. 
 18 |                 angular.forEach(element.find('input,select,textarea'), function(child_element) {
 19 |                     child_element = $(child_element);
 20 |                     if (!child_element.attr('name')) {
 21 |                         child_element.attr('name', getRandomInt());
 22 |                         console.log('WARNING! AngularValidator -> One of your form elements(<input>, <textarea>, <select>) is missing a name. We got your back and added a name, but if you want a pretty one you should add it yourself.');
 23 |                         need_to_recompile = true;
 24 |                     }
 25 |                 });
 26 | 
 27 |                 // Uses a ransom to prevent duplicate form names.
 28 |                 if (!attrs.name) {
 29 |                     element.attr('name', 'TGAV_FORM_' + getRandomInt());
 30 |                     console.log('WARNING! AngularValidator -> Your form element(<form>) is missing a name. We got your back and added a name, but if you want a pretty one you should add it yourself.');
 31 |                     need_to_recompile = true;
 32 |                 }
 33 | 
 34 |                 // We need to recompile so that the passed scope is updated with the new form names.            
 35 |                 if (need_to_recompile) {
 36 |                     $compile(element)(scope);
 37 |                     return;
 38 |                 }
 39 | 
 40 |                 // This is the DOM form element
 41 |                 var DOMForm = angular.element(element)[0];
 42 | 
 43 |                 // an array to store all the watches for form elements
 44 |                 var watches = [];
 45 | 
 46 |                 // This is the the scope form model, it is created automatically by angular
 47 |                 // All validation states are contained here
 48 |                 // See: https://docs.angularjs.org/api/ng/directive/form
 49 |                 var scopeForm = $parse(attrs.name)(scope);
 50 | 
 51 |                 // Set the default submitted state to false
 52 |                 scopeForm.submitted = false;
 53 | 
 54 |                 // Watch form length to add watches for new form elements
 55 |                 scope.$watch(function() {
 56 |                     return Object.keys(scopeForm).length;
 57 |                 }, function() {
 58 |                     // Destroy all the watches
 59 |                     // This is cleaner than figuring out which items are already being watched and only un-watching those.
 60 |                     angular.forEach(watches, function(watch) {
 61 |                         watch();
 62 |                     });
 63 |                     setupWatches(DOMForm);
 64 |                 });
 65 | 
 66 | 
 67 |                 // Intercept and handle submit events of the form
 68 |                 element.on('submit', function(event) {
 69 |                     event.preventDefault();
 70 |                     scope.$apply(function() {
 71 |                         scopeForm.submitted = true;
 72 |                     });
 73 | 
 74 |                     // If the form is valid then call the function that is declared in the angular-validator-submit attribute on the form element
 75 |                     if (scopeForm.$valid) {
 76 |                         scope.$apply(function() {
 77 |                             scope.$eval(attrs['angularValidatorSubmit']);
 78 |                         });
 79 |                     }
 80 |                 });
 81 | 
 82 |                 // Clear all the form values. Set everything to pristine.
 83 |                 scopeForm.reset = function() {
 84 |                     angular.forEach(DOMForm, function(formElement) {
 85 |                         if (formElement.name && scopeForm[formElement.name]) {
 86 |                             scopeForm[formElement.name].$setViewValue("");
 87 |                             scopeForm[formElement.name].$render();
 88 |                         }
 89 |                     });
 90 |                     scopeForm.submitted = false;
 91 |                     scopeForm.$setPristine();
 92 |                 };
 93 | 
 94 | 
 95 |                 // Setup watches on all form fields 
 96 |                 setupWatches(DOMForm);
 97 | 
 98 |                 // Check if there is invalid message service for the entire form; 
 99 |                 // if yes, return the injected service; if no, return false;
100 |                 function hasFormInvalidMessage(formElement) {
101 |                     if (formElement && 'invalid-message' in formElement.attributes) {
102 |                         return $injector.get(formElement.attributes['invalid-message'].value);
103 |                     } else {
104 |                         return false;
105 |                     }
106 |                 }
107 | 
108 |                 // Iterate through the form fields and setup watches on each one
109 |                 function setupWatches(formElement) {
110 |                     var formInvalidMessage = hasFormInvalidMessage(formElement);
111 |                     for (var i = 0; i < formElement.length; i++) {
112 |                         // This ensures we are only watching form fields
113 |                         if (i in formElement) {
114 |                             setupWatch(formElement[i], formInvalidMessage);
115 |                         }
116 |                     }
117 |                 }
118 | 
119 | 
120 |                 // Setup $watch on a single form element
121 |                 function setupWatch(elementToWatch, formInvalidMessage) {
122 |                     // If element is set to validate on blur then update the element on blur
123 |                     if ("validate-on" in elementToWatch.attributes && elementToWatch.attributes["validate-on"].value === "blur") {
124 |                         angular.element(elementToWatch).on('blur', function() {
125 |                             updateValidationMessage(elementToWatch, formInvalidMessage);
126 |                             updateValidationClass(elementToWatch);
127 |                         });
128 |                     }
129 | 
130 |                     var watch = scope.$watch(function() {
131 |                             return elementToWatch.value + elementToWatch.required + scopeForm.submitted + checkElementValidity(elementToWatch) + getDirtyValue(scopeForm[elementToWatch.name]) + getValidValue(scopeForm[elementToWatch.name]);
132 |                         },
133 |                         function() {
134 |                             if (scopeForm.submitted) {
135 |                                 updateValidationMessage(elementToWatch, formInvalidMessage);
136 |                                 updateValidationClass(elementToWatch);
137 |                             } else {
138 |                                 // Determine if the element in question is to be updated on blur
139 |                                 var isDirtyElement = "validate-on" in elementToWatch.attributes && elementToWatch.attributes["validate-on"].value === "dirty";
140 | 
141 |                                 if (isDirtyElement) {
142 |                                     updateValidationMessage(elementToWatch, formInvalidMessage);
143 |                                     updateValidationClass(elementToWatch);
144 |                                 }
145 |                                 // This will get called in the case of resetting the form. This only gets called for elements that update on blur and submit.
146 |                                 else if (scopeForm[elementToWatch.name] && scopeForm[elementToWatch.name].$pristine) {
147 |                                     updateValidationMessage(elementToWatch, formInvalidMessage);
148 |                                     updateValidationClass(elementToWatch);
149 |                                 }
150 |                             }
151 | 
152 |                         });
153 | 
154 |                     watches.push(watch);
155 |                 }
156 | 
157 | 
158 |                 // Returns the $dirty value of the element if it exists
159 |                 function getDirtyValue(element) {
160 |                     if (element && "$dirty" in element) {
161 |                         return element.$dirty;
162 |                     }
163 |                 }
164 |                 
165 |                 // Returns the $valid value of the element if it exists
166 |                 function getValidValue(element) {
167 |                     if (element && "$valid" in element) {
168 |                         return element.$valid;
169 |                     }
170 |                 }
171 | 
172 | 
173 |                 function checkElementValidity(element) {
174 |                     // If element has a custom validation function
175 |                     if ("validator" in element.attributes) {
176 |                         // Call the custom validator function
177 |                         var isElementValid = scope.$eval(element.attributes.validator.value);
178 |                         scopeForm[element.name].$setValidity("angularValidator", isElementValid);
179 |                         return isElementValid;
180 |                     }
181 |                 }
182 | 
183 | 
184 |                 // Adds and removes an error message as a sibling element of the form field
185 |                 // depending on the validity of the form field and the submitted state of the form.
186 |                 // Will use default message if a custom message is not given
187 |                 function updateValidationMessage(element, formInvalidMessage) {
188 | 
189 |                     var defaultRequiredMessage = function() {
190 |                         return "<i class='fa fa-times'></i> Required";
191 |                     };
192 |                     var defaultInvalidMessage = function() {
193 |                         return "<i class='fa fa-times'></i> Invalid";
194 |                     };
195 | 
196 |                     // Make sure the element is a form field and not a button for example
197 |                     // Only form elements should have names. 
198 |                     if (!(element.name in scopeForm)) {
199 |                         return;
200 |                     }
201 | 
202 |                     var scopeElementModel = scopeForm[element.name];
203 | 
204 |                     // Remove all validation messages 
205 |                     var validationMessageElement = isValidationMessagePresent(element);
206 |                     if (validationMessageElement) {
207 |                         validationMessageElement.remove();
208 |                     }
209 | 
210 |                     // Do not add new generated <label> element if 'angular-validator-quiet' on the <form>
211 |                     if("angular-validator-quiet" in DOMForm.attributes || "angular-validator-quiet" in element.attributes){
212 |                         return;
213 |                     }
214 | 
215 | 
216 |                     // Only add validation messages if the form field is $dirty or the form has been submitted
217 |                     if (scopeElementModel.$dirty || scopeForm.submitted) {
218 | 
219 |                         if (scopeElementModel.$error.required) {
220 |                             // If there is a custom required message display it
221 |                             if ("required-message" in element.attributes) {
222 |                                 angular.element(element).after(generateErrorMessage(element.attributes['required-message'].value));
223 |                             }
224 |                             // Display the default required message
225 |                             else {
226 |                                 angular.element(element).after(generateErrorMessage(defaultRequiredMessage));
227 |                             }
228 |                         } else if (!scopeElementModel.$valid) {
229 |                             // If there is a custom validation message add it
230 |                             if ("invalid-message" in element.attributes) {
231 |                                 angular.element(element).after(generateErrorMessage(element.attributes['invalid-message'].value));
232 |                             }
233 |                             // Display error message provided by custom service
234 |                             else if (formInvalidMessage) {
235 |                                 angular.element(element).after(generateErrorMessage(formInvalidMessage.message(scopeElementModel, element)));
236 |                             }
237 |                             // Display the default error message
238 |                             else {
239 |                                 angular.element(element).after(generateErrorMessage(defaultInvalidMessage));
240 |                             }
241 |                         }
242 |                     }
243 |                 }
244 | 
245 | 
246 |                 function generateErrorMessage(messageText) {
247 |                     return "<label class='control-label has-error validationMessage'>" + scope.$eval(messageText) + "</label>";
248 |                 }
249 | 
250 | 
251 |                 // Returns the validation message element or False
252 |                 function isValidationMessagePresent(element) {
253 |                     var elementSiblings = angular.element(element).parent().children();
254 |                     for (var i = 0; i < elementSiblings.length; i++) {
255 |                         if (angular.element(elementSiblings[i]).hasClass("validationMessage")) {
256 |                             return angular.element(elementSiblings[i]);
257 |                         }
258 |                     }
259 |                     return false;
260 |                 }
261 | 
262 | 
263 |                 // Adds and removes .has-error class to both the form element and the form element's parent
264 |                 // depending on the validity of the element and the submitted state of the form
265 |                 function updateValidationClass(element) {
266 |                     // Make sure the element is a form field and not a button for example
267 |                     // Only form fields should have names. 
268 |                     if (!(element.name in scopeForm)) {
269 |                         return;
270 |                     }
271 |                     var formField = scopeForm[element.name];
272 | 
273 |                     // This is extra for users wishing to implement the .has-error class on the field itself
274 |                     // instead of on the parent element. Note that Bootstrap requires the .has-error class to be on the parent element
275 |                     angular.element(element).removeClass('has-error');
276 |                     angular.element(element.parentNode).removeClass('has-error');
277 | 
278 | 
279 |                     // Only add/remove validation classes if the field is $dirty or the form has been submitted
280 |                     if (formField.$dirty || scopeForm.submitted) {
281 |                         if (formField.$invalid) {
282 |                             angular.element(element.parentNode).addClass('has-error');
283 | 
284 |                             // This is extra for users wishing to implement the .has-error class on the field itself
285 |                             // instead of on the parent element. Note that Bootstrap requires the .has-error class to be on the parent element
286 |                             angular.element(element).addClass('has-error');
287 |                         }
288 |                     }
289 |                 }
290 | 
291 |             }
292 |         };
293 |     }
294 | ]);
295 | 


--------------------------------------------------------------------------------
/dist/angular-validator.min.js:
--------------------------------------------------------------------------------
1 | angular.module("angularValidator",[]),angular.module("angularValidator").directive("angularValidator",["$injector","$parse","$compile",function(a,b,c){return{restrict:"A",link:function(d,e,f,g){function h(b){return!!(b&&"invalid-message"in b.attributes)&&a.get(b.attributes["invalid-message"].value)}function i(a){for(var b=h(a),c=0;c<a.length;c++)c in a&&j(a[c],b)}function j(a,b){"validate-on"in a.attributes&&"blur"===a.attributes["validate-on"].value&&angular.element(a).on("blur",function(){n(a,b),q(a)});var c=d.$watch(function(){return a.value+a.required+v.submitted+m(a)+k(v[a.name])+l(v[a.name])},function(){if(v.submitted)n(a,b),q(a);else{var c="validate-on"in a.attributes&&"dirty"===a.attributes["validate-on"].value;c?(n(a,b),q(a)):v[a.name]&&v[a.name].$pristine&&(n(a,b),q(a))}});u.push(c)}function k(a){if(a&&"$dirty"in a)return a.$dirty}function l(a){if(a&&"$valid"in a)return a.$valid}function m(a){if("validator"in a.attributes){var b=d.$eval(a.attributes.validator.value);return v[a.name].$setValidity("angularValidator",b),b}}function n(a,b){var c=function(){return"<i class='fa fa-times'></i> Required"},d=function(){return"<i class='fa fa-times'></i> Invalid"};if(a.name in v){var e=v[a.name],f=p(a);f&&f.remove(),"angular-validator-quiet"in t.attributes||"angular-validator-quiet"in a.attributes||(e.$dirty||v.submitted)&&(e.$error.required?"required-message"in a.attributes?angular.element(a).after(o(a.attributes["required-message"].value)):angular.element(a).after(o(c)):e.$valid||("invalid-message"in a.attributes?angular.element(a).after(o(a.attributes["invalid-message"].value)):b?angular.element(a).after(o(b.message(e,a))):angular.element(a).after(o(d))))}}function o(a){return"<label class='control-label has-error validationMessage'>"+d.$eval(a)+"</label>"}function p(a){for(var b=angular.element(a).parent().children(),c=0;c<b.length;c++)if(angular.element(b[c]).hasClass("validationMessage"))return angular.element(b[c]);return!1}function q(a){if(a.name in v){var b=v[a.name];angular.element(a).removeClass("has-error"),angular.element(a.parentNode).removeClass("has-error"),(b.$dirty||v.submitted)&&b.$invalid&&(angular.element(a.parentNode).addClass("has-error"),angular.element(a).addClass("has-error"))}}var r=function(){return Math.floor(1e5*Math.random())},s=!1;if(angular.forEach(e.find("input,select,textarea"),function(a){a=$(a),a.attr("name")||(a.attr("name",r()),console.log("WARNING! AngularValidator -> One of your form elements(<input>, <textarea>, <select>) is missing a name. We got your back and added a name, but if you want a pretty one you should add it yourself."),s=!0)}),f.name||(e.attr("name","TGAV_FORM_"+r()),console.log("WARNING! AngularValidator -> Your form element(<form>) is missing a name. We got your back and added a name, but if you want a pretty one you should add it yourself."),s=!0),s)return void c(e)(d);var t=angular.element(e)[0],u=[],v=b(f.name)(d);v.submitted=!1,d.$watch(function(){return Object.keys(v).length},function(){angular.forEach(u,function(a){a()}),i(t)}),e.on("submit",function(a){a.preventDefault(),d.$apply(function(){v.submitted=!0}),v.$valid&&d.$apply(function(){d.$eval(f.angularValidatorSubmit)})}),v.reset=function(){angular.forEach(t,function(a){a.name&&v[a.name]&&(v[a.name].$setViewValue(""),v[a.name].$render())}),v.submitted=!1,v.$setPristine()},i(t)}}}]);


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | module.exports = function(config) {
 3 |   config.set({
 4 | 
 5 |     // base path, that will be used to resolve files and exclude
 6 |     basePath: '',
 7 | 
 8 |     frameworks: ["jasmine"],
 9 | 
10 |     // list of files / patterns to load in the browser
11 |     files: [
12 |       'bower_components/angular/angular.js',
13 |       'bower_components/angular-mocks/angular-mocks.js',
14 |       'dist/angular-validator.min.js',
15 |       'test/*.js'
16 |     ],
17 | 
18 | 
19 |     // list of files to exclude
20 |     exclude: [
21 | 
22 |     ],
23 | 
24 | 
25 |     // test results reporter to use
26 |     // possible values: 'dots', 'progress', 'junit'
27 |     reporters: ['progress'],
28 | 
29 | 
30 |     // web server port
31 |     port: 9876,
32 | 
33 | 
34 |     // cli runner port
35 |     runnerPort: 9100,
36 | 
37 | 
38 |     // enable / disable colors in the output (reporters and logs)
39 |     colors: true,
40 | 
41 | 
42 |     // level of logging
43 |     // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
44 |     logLevel: config.LOG_INFO,
45 | 
46 | 
47 |     // enable / disable watching file and executing tests whenever any file changes
48 |     autoWatch: true,
49 | 
50 | 
51 |     // Start these browsers, currently available:
52 |     // - Chrome
53 |     // - ChromeCanary
54 |     // - Firefox
55 |     // - Opera
56 |     // - Safari (only Mac)
57 |     // - PhantomJS
58 |     // - IE (only Windows)
59 |     browsers: ['PhantomJS'],
60 | 
61 | 
62 |     // If browser does not capture in given timeout [ms], kill it
63 |     captureTimeout: 60000,
64 | 
65 | 
66 |     // Continuous Integration mode
67 |     // if true, it capture browsers, run tests and exit
68 |     singleRun: false
69 | 
70 |   });
71 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-validator",
 3 |   "version": "1.2.10",
 4 |   "description": "Angular-Validator is an easy to use, powerful and lightweight AngularJS validation directive.",
 5 |   "main": "./dist/angular-validator.js",
 6 |   "scripts": {
 7 |     "test": "grunt test --verbose"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/turinggroup/angular-validator.git"
12 |   },
13 |   "keywords": [
14 |     "AngularJS",
15 |     "validation",
16 |     "angular validation",
17 |     "form validation",
18 |     "angular",
19 |     "validator",
20 |     "client-side"
21 |   ],
22 |   "author": "Zohar Jackson <zohar@turinggroup.com>",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/turinggroup/angular-validator/issues"
26 |   },
27 |   "homepage": "https://github.com/turinggroup/angular-validator#readme",
28 |   "devDependencies": {
29 |     "grunt": "^1.0.1",
30 |     "grunt-browser-sync": "^2.2.0",
31 |     "grunt-cli": "^1.2.0",
32 |     "grunt-contrib-concat": "^1.0.1",
33 |     "grunt-contrib-connect": "^1.0.2",
34 |     "grunt-contrib-jshint": "^1.0.0",
35 |     "grunt-contrib-uglify": "^2.0.0",
36 |     "grunt-contrib-watch": "^1.0.0",
37 |     "grunt-karma": "^2.0.0",
38 |     "grunt-ng-annotate": "^3.0.0",
39 |     "jasmine-core": "^2.5.2",
40 |     "karma": "^1.3.0",
41 |     "karma-chrome-launcher": "^2.0.0",
42 |     "karma-jasmine": "^1.0.2",
43 |     "karma-phantomjs-launcher": "^1.0.2",
44 |     "ng-annotate": "^1.2.1"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/angular-validator.js:
--------------------------------------------------------------------------------
  1 | angular.module('angularValidator', []);
  2 | 
  3 | angular.module('angularValidator').directive('angularValidator', ['$injector', '$parse', '$compile',
  4 |     function($injector, $parse, $compile) {
  5 |         return {
  6 |             restrict: 'A',
  7 |             link: function(scope, element, attrs, fn) {
  8 |                 var getRandomInt = function() {
  9 |                     return Math.floor((Math.random() * 100000));
 10 |                 };
 11 | 
 12 |                 // For this directive to work the form needs a name attribute as well as every input element.
 13 |                 // This function will add names where missing
 14 |                 var need_to_recompile = false;
 15 | 
 16 |                 // Iterate through all the children of the form element and add a `name` attribute to the ones
 17 |                 // that are missing it. 
 18 |                 angular.forEach(element.find('input,select,textarea'), function(child_element) {
 19 |                     child_element = $(child_element);
 20 |                     if (!child_element.attr('name')) {
 21 |                         child_element.attr('name', getRandomInt());
 22 |                         console.log('WARNING! AngularValidator -> One of your form elements(<input>, <textarea>, <select>) is missing a name. We got your back and added a name, but if you want a pretty one you should add it yourself.');
 23 |                         need_to_recompile = true;
 24 |                     }
 25 |                 });
 26 | 
 27 |                 // Uses a ransom to prevent duplicate form names.
 28 |                 if (!attrs.name) {
 29 |                     element.attr('name', 'TGAV_FORM_' + getRandomInt());
 30 |                     console.log('WARNING! AngularValidator -> Your form element(<form>) is missing a name. We got your back and added a name, but if you want a pretty one you should add it yourself.');
 31 |                     need_to_recompile = true;
 32 |                 }
 33 | 
 34 |                 // We need to recompile so that the passed scope is updated with the new form names.            
 35 |                 if (need_to_recompile) {
 36 |                     $compile(element)(scope);
 37 |                     return;
 38 |                 }
 39 | 
 40 |                 // This is the DOM form element
 41 |                 var DOMForm = angular.element(element)[0];
 42 | 
 43 |                 // an array to store all the watches for form elements
 44 |                 var watches = [];
 45 | 
 46 |                 // This is the the scope form model, it is created automatically by angular
 47 |                 // All validation states are contained here
 48 |                 // See: https://docs.angularjs.org/api/ng/directive/form
 49 |                 var scopeForm = $parse(attrs.name)(scope);
 50 | 
 51 |                 // Set the default submitted state to false
 52 |                 scopeForm.submitted = false;
 53 | 
 54 |                 // Watch form length to add watches for new form elements
 55 |                 scope.$watch(function() {
 56 |                     return Object.keys(scopeForm).length;
 57 |                 }, function() {
 58 |                     // Destroy all the watches
 59 |                     // This is cleaner than figuring out which items are already being watched and only un-watching those.
 60 |                     angular.forEach(watches, function(watch) {
 61 |                         watch();
 62 |                     });
 63 |                     setupWatches(DOMForm);
 64 |                 });
 65 | 
 66 | 
 67 |                 // Intercept and handle submit events of the form
 68 |                 element.on('submit', function(event) {
 69 |                     event.preventDefault();
 70 |                     scope.$apply(function() {
 71 |                         scopeForm.submitted = true;
 72 |                     });
 73 | 
 74 |                     // If the form is valid then call the function that is declared in the angular-validator-submit attribute on the form element
 75 |                     if (scopeForm.$valid) {
 76 |                         scope.$apply(function() {
 77 |                             scope.$eval(attrs['angularValidatorSubmit']);
 78 |                         });
 79 |                     }
 80 |                 });
 81 | 
 82 |                 // Clear all the form values. Set everything to pristine.
 83 |                 scopeForm.reset = function() {
 84 |                     angular.forEach(DOMForm, function(formElement) {
 85 |                         if (formElement.name && scopeForm[formElement.name]) {
 86 |                             scopeForm[formElement.name].$setViewValue("");
 87 |                             scopeForm[formElement.name].$render();
 88 |                         }
 89 |                     });
 90 |                     scopeForm.submitted = false;
 91 |                     scopeForm.$setPristine();
 92 |                 };
 93 | 
 94 | 
 95 |                 // Setup watches on all form fields 
 96 |                 setupWatches(DOMForm);
 97 | 
 98 |                 // Check if there is invalid message service for the entire form; 
 99 |                 // if yes, return the injected service; if no, return false;
100 |                 function hasFormInvalidMessage(formElement) {
101 |                     if (formElement && 'invalid-message' in formElement.attributes) {
102 |                         return $injector.get(formElement.attributes['invalid-message'].value);
103 |                     } else {
104 |                         return false;
105 |                     }
106 |                 }
107 | 
108 |                 // Iterate through the form fields and setup watches on each one
109 |                 function setupWatches(formElement) {
110 |                     var formInvalidMessage = hasFormInvalidMessage(formElement);
111 |                     for (var i = 0; i < formElement.length; i++) {
112 |                         // This ensures we are only watching form fields
113 |                         if (i in formElement) {
114 |                             setupWatch(formElement[i], formInvalidMessage);
115 |                         }
116 |                     }
117 |                 }
118 | 
119 | 
120 |                 // Setup $watch on a single form element
121 |                 function setupWatch(elementToWatch, formInvalidMessage) {
122 |                     // If element is set to validate on blur then update the element on blur
123 |                     if ("validate-on" in elementToWatch.attributes && elementToWatch.attributes["validate-on"].value === "blur") {
124 |                         angular.element(elementToWatch).on('blur', function() {
125 |                             updateValidationMessage(elementToWatch, formInvalidMessage);
126 |                             updateValidationClass(elementToWatch);
127 |                         });
128 |                     }
129 | 
130 |                     var watch = scope.$watch(function() {
131 |                             return elementToWatch.value + elementToWatch.required + scopeForm.submitted + checkElementValidity(elementToWatch) + getDirtyValue(scopeForm[elementToWatch.name]) + getValidValue(scopeForm[elementToWatch.name]);
132 |                         },
133 |                         function() {
134 |                             if (scopeForm.submitted) {
135 |                                 updateValidationMessage(elementToWatch, formInvalidMessage);
136 |                                 updateValidationClass(elementToWatch);
137 |                             } else {
138 |                                 // Determine if the element in question is to be updated on blur
139 |                                 var isDirtyElement = "validate-on" in elementToWatch.attributes && elementToWatch.attributes["validate-on"].value === "dirty";
140 | 
141 |                                 if (isDirtyElement) {
142 |                                     updateValidationMessage(elementToWatch, formInvalidMessage);
143 |                                     updateValidationClass(elementToWatch);
144 |                                 }
145 |                                 // This will get called in the case of resetting the form. This only gets called for elements that update on blur and submit.
146 |                                 else if (scopeForm[elementToWatch.name] && scopeForm[elementToWatch.name].$pristine) {
147 |                                     updateValidationMessage(elementToWatch, formInvalidMessage);
148 |                                     updateValidationClass(elementToWatch);
149 |                                 }
150 |                             }
151 | 
152 |                         });
153 | 
154 |                     watches.push(watch);
155 |                 }
156 | 
157 | 
158 |                 // Returns the $dirty value of the element if it exists
159 |                 function getDirtyValue(element) {
160 |                     if (element && "$dirty" in element) {
161 |                         return element.$dirty;
162 |                     }
163 |                 }
164 |                 
165 |                 // Returns the $valid value of the element if it exists
166 |                 function getValidValue(element) {
167 |                     if (element && "$valid" in element) {
168 |                         return element.$valid;
169 |                     }
170 |                 }
171 | 
172 | 
173 |                 function checkElementValidity(element) {
174 |                     // If element has a custom validation function
175 |                     if ("validator" in element.attributes) {
176 |                         // Call the custom validator function
177 |                         var isElementValid = scope.$eval(element.attributes.validator.value);
178 |                         scopeForm[element.name].$setValidity("angularValidator", isElementValid);
179 |                         return isElementValid;
180 |                     }
181 |                 }
182 | 
183 | 
184 |                 // Adds and removes an error message as a sibling element of the form field
185 |                 // depending on the validity of the form field and the submitted state of the form.
186 |                 // Will use default message if a custom message is not given
187 |                 function updateValidationMessage(element, formInvalidMessage) {
188 | 
189 |                     var defaultRequiredMessage = function() {
190 |                         return "<i class='fa fa-times'></i> Required";
191 |                     };
192 |                     var defaultInvalidMessage = function() {
193 |                         return "<i class='fa fa-times'></i> Invalid";
194 |                     };
195 | 
196 |                     // Make sure the element is a form field and not a button for example
197 |                     // Only form elements should have names. 
198 |                     if (!(element.name in scopeForm)) {
199 |                         return;
200 |                     }
201 | 
202 |                     var scopeElementModel = scopeForm[element.name];
203 | 
204 |                     // Remove all validation messages 
205 |                     var validationMessageElement = isValidationMessagePresent(element);
206 |                     if (validationMessageElement) {
207 |                         validationMessageElement.remove();
208 |                     }
209 | 
210 |                     // Do not add new generated <label> element if 'angular-validator-quiet' on the <form>
211 |                     if("angular-validator-quiet" in DOMForm.attributes || "angular-validator-quiet" in element.attributes){
212 |                         return;
213 |                     }
214 | 
215 | 
216 |                     // Only add validation messages if the form field is $dirty or the form has been submitted
217 |                     if (scopeElementModel.$dirty || scopeForm.submitted) {
218 | 
219 |                         if (scopeElementModel.$error.required) {
220 |                             // If there is a custom required message display it
221 |                             if ("required-message" in element.attributes) {
222 |                                 angular.element(element).after(generateErrorMessage(element.attributes['required-message'].value));
223 |                             }
224 |                             // Display the default required message
225 |                             else {
226 |                                 angular.element(element).after(generateErrorMessage(defaultRequiredMessage));
227 |                             }
228 |                         } else if (!scopeElementModel.$valid) {
229 |                             // If there is a custom validation message add it
230 |                             if ("invalid-message" in element.attributes) {
231 |                                 angular.element(element).after(generateErrorMessage(element.attributes['invalid-message'].value));
232 |                             }
233 |                             // Display error message provided by custom service
234 |                             else if (formInvalidMessage) {
235 |                                 angular.element(element).after(generateErrorMessage(formInvalidMessage.message(scopeElementModel, element)));
236 |                             }
237 |                             // Display the default error message
238 |                             else {
239 |                                 angular.element(element).after(generateErrorMessage(defaultInvalidMessage));
240 |                             }
241 |                         }
242 |                     }
243 |                 }
244 | 
245 | 
246 |                 function generateErrorMessage(messageText) {
247 |                     return "<label class='control-label has-error validationMessage'>" + scope.$eval(messageText) + "</label>";
248 |                 }
249 | 
250 | 
251 |                 // Returns the validation message element or False
252 |                 function isValidationMessagePresent(element) {
253 |                     var elementSiblings = angular.element(element).parent().children();
254 |                     for (var i = 0; i < elementSiblings.length; i++) {
255 |                         if (angular.element(elementSiblings[i]).hasClass("validationMessage")) {
256 |                             return angular.element(elementSiblings[i]);
257 |                         }
258 |                     }
259 |                     return false;
260 |                 }
261 | 
262 | 
263 |                 // Adds and removes .has-error class to both the form element and the form element's parent
264 |                 // depending on the validity of the element and the submitted state of the form
265 |                 function updateValidationClass(element) {
266 |                     // Make sure the element is a form field and not a button for example
267 |                     // Only form fields should have names. 
268 |                     if (!(element.name in scopeForm)) {
269 |                         return;
270 |                     }
271 |                     var formField = scopeForm[element.name];
272 | 
273 |                     // This is extra for users wishing to implement the .has-error class on the field itself
274 |                     // instead of on the parent element. Note that Bootstrap requires the .has-error class to be on the parent element
275 |                     angular.element(element).removeClass('has-error');
276 |                     angular.element(element.parentNode).removeClass('has-error');
277 | 
278 | 
279 |                     // Only add/remove validation classes if the field is $dirty or the form has been submitted
280 |                     if (formField.$dirty || scopeForm.submitted) {
281 |                         if (formField.$invalid) {
282 |                             angular.element(element.parentNode).addClass('has-error');
283 | 
284 |                             // This is extra for users wishing to implement the .has-error class on the field itself
285 |                             // instead of on the parent element. Note that Bootstrap requires the .has-error class to be on the parent element
286 |                             angular.element(element).addClass('has-error');
287 |                         }
288 |                     }
289 |                 }
290 | 
291 |             }
292 |         };
293 |     }
294 | ]);
295 | 


--------------------------------------------------------------------------------
/test/angular-validator-spec.js:
--------------------------------------------------------------------------------
  1 |  describe('angularValidator', function() {
  2 | 
  3 |    beforeEach(angular.mock.module('angularValidator'));
  4 | 
  5 |    var scope, compile;
  6 | 
  7 |    describe('angularValidator with dotted name', function () {
  8 |      var htmlForm, element, linkIt;
  9 | 
 10 |      beforeEach(inject(function ($rootScope, $compile) {
 11 |        scope = $rootScope.$new();
 12 |        scope.object = {};
 13 | 
 14 |        htmlForm = angular.element(
 15 |            '<form name="object.form" angular-validator>' +
 16 |            '<input ng-model="model.firstName" validate-on="dirty" name="firstName" type="text" required/>' +
 17 |            '</form>'
 18 |        );
 19 | 
 20 |        linkIt = function () {
 21 |          element = $compile(htmlForm)(scope);
 22 |          scope.$digest();
 23 |        };
 24 |      }));
 25 | 
 26 |      it('should not throw an error during linking', function () {
 27 |        expect(linkIt).not.toThrow();
 28 |      });
 29 | 
 30 |      it('should correctly parse the dotted form name, evidenced by what\'s on scope', function () {
 31 |        linkIt();
 32 |        expect(scope.object.form).toBeDefined();
 33 |      });
 34 |    });
 35 |    
 36 |   describe('angularValidator without form invalid message', function () {
 37 |    beforeEach(inject(function($rootScope, $compile) {
 38 |      scope = $rootScope.$new();
 39 | 
 40 |      htmlForm = angular.element(
 41 |        '<form name="myForm" angular-validator>' +
 42 |        '<input ng-model="model.firstName" validate-on="dirty" name="firstName" type="text" required/>' +
 43 |        '<input ng-model="model.lastName" validate-on="dirty"name="lastName" ng-pattern="/lastName/" invalid-message="\'WHOA\'" type="text" required/>' +
 44 |        '<input ng-model="model.city" name="city" type="text" validate-on="dirty" validator="model.city === \'chicago\'" required/>' +
 45 |        '<input ng-model="model.state" name="state" type="text" required/>' +
 46 |        '</form>'
 47 |      );
 48 | 
 49 |      element = $compile(htmlForm)(scope);
 50 |      scope.$digest();
 51 |    }));
 52 | 
 53 | 
 54 | 
 55 |    describe('$dirty tests', function() {
 56 | 
 57 |      it('should be dirty', function() {
 58 |        scope.myForm.lastName.$setViewValue('lastName');
 59 |        scope.$digest();
 60 | 
 61 |        expect(scope.myForm.lastName.$dirty).toBe(true);
 62 |        expect(element.hasClass('ng-dirty')).toBe(true);
 63 | 
 64 |      });
 65 | 
 66 |      it('should not be $dirty', function() {
 67 |        expect(scope.myForm.$pristine).toBe(true);
 68 |        expect(element.hasClass('ng-pristine')).toBe(true);
 69 |      });
 70 |    });
 71 | 
 72 | 
 73 |    describe('$valid tests', function() {
 74 | 
 75 |      it('should be $valid', function() {
 76 |        scope.myForm.lastName.$setViewValue('lastName');
 77 |        scope.$digest();
 78 | 
 79 |        expect(scope.myForm.lastName.$invalid).toBe(false);
 80 |      });
 81 | 
 82 |      it('should not be $valid', function() {
 83 |        scope.myForm.lastName.$setViewValue('sss');
 84 |        scope.$digest();
 85 | 
 86 |        expect(scope.myForm.lastName.$invalid).toBe(true);
 87 |      });
 88 |    });
 89 | 
 90 | 
 91 | 
 92 |    describe('custom validator tests', function() {
 93 | 
 94 |      it('should be $valid', function() {
 95 |        scope.myForm.city.$setViewValue('chicago');
 96 |        scope.$digest();
 97 | 
 98 |        expect(scope.myForm.city.$invalid).toBe(false);
 99 |      });
100 | 
101 |      it('should not be $valid', function() {
102 |        scope.myForm.city.$setViewValue('sss');
103 |        scope.$digest();
104 | 
105 |        expect(scope.myForm.city.$invalid).toBe(true);
106 |      });
107 |    });
108 | 
109 | 
110 |    describe('.has-error class tests', function() {
111 | 
112 |      it('should not not have class .has-error', function() {
113 |        expect(element.hasClass('has-error')).toBe(false);
114 |        expect(scope.myForm.$valid).toBe(false);
115 |      });
116 | 
117 |      it('should not not have class .has-error', function() {
118 |        scope.myForm.firstName.$setViewValue('blah');
119 |        scope.myForm.lastName.$setViewValue('lastName');
120 |        scope.myForm.city.$setViewValue('chicago');
121 |        scope.myForm.state.$setViewValue('chicago');
122 | 
123 |        scope.$digest();
124 | 
125 |        expect(element.hasClass('has-error')).toBe(false);
126 |        expect(scope.myForm.$valid).toBe(true);
127 |        expect(scope.myForm.firstName.$valid).toBe(true);
128 |      });
129 | 
130 | 
131 |      it('should have the class .has-error', function() {
132 |        scope.myForm.lastName.$setViewValue('blah');
133 |        scope.$digest();
134 | 
135 |        expect(scope.myForm.lastName.$valid).toBe(false);
136 |        expect(element.hasClass('has-error')).toBe(true);
137 |        expect(scope.myForm.$valid).toBe(false);
138 |        expect(element.hasClass('ng-invalid')).toBe(true);
139 |      });
140 |    });
141 | 
142 | 
143 |    describe('required and error messages test', function() {
144 | 
145 |      it('should not display error or required message', function() {
146 |        expect(element.hasClass('has-error')).toBe(false);
147 |        expect(scope.myForm.$valid).toBe(false);
148 |      });
149 | 
150 |      it('should show required message', function() {
151 |        scope.myForm.firstName.$setViewValue('');
152 |        scope.$digest();
153 | 
154 |        expect(element[0][0].nextSibling.innerHTML.indexOf("Required") > 0).toBe(true);
155 |      });
156 | 
157 | 
158 |      it('should have the custom invalid message', function() {
159 |        scope.myForm.lastName.$setViewValue('blah');
160 |        scope.$digest();
161 | 
162 |        expect(element[0][1].nextSibling.innerHTML === "WHOA").toBe(true);
163 |      });
164 |    });
165 |  });
166 | 
167 | 
168 |  describe('angularValidator with form invalid message', function () {
169 | 
170 |    var mockCustomMessage;
171 | 
172 |    beforeEach(function () {
173 |      mockCustomMessage = {
174 |        // scopeElementModel is the object in scope version, element is the object in DOM version
175 |        message: function (scopeElementModel, element) {
176 |          var errors = scopeElementModel.$error;
177 |          if (errors.maxlength) {
178 |            return "'Should be no longer than " + element.attributes['ng-maxlength'].value + " characters!'";
179 |          } else {
180 |            // default message
181 |            return "'This field is invalid!'";
182 |          }
183 |        }
184 |      };
185 | 
186 |      module(function ($provide) {
187 |        $provide.value('customMessage', mockCustomMessage);
188 |      });
189 |    });
190 | 
191 |    beforeEach(inject(function ($rootScope, $compile) {
192 |      scope = $rootScope.$new();
193 | 
194 |      htmlForm = angular.element(
195 |        '<form name="myForm" angular-validator invalid-message="customMessage">' +
196 |        '<input ng-model="model.firstName" validate-on="dirty" name="firstName" type="text" required ng-maxlength="5"/>' +
197 |        '<input ng-model="model.lastName" validate-on="dirty" name="lastName" type="text" required ng-maxlength="5" invalid-message="\'The last name is too long!\'"/>' +
198 |        '</form>'
199 |      );
200 | 
201 |      element = $compile(htmlForm)(scope);
202 |      scope.$digest();
203 |    }));
204 | 
205 | 
206 |    describe('form invalid message function', function () {
207 | 
208 |      it('should show message from customMessage service', function () {
209 |        scope.myForm.firstName.$setViewValue('Joseph');
210 |        scope.$digest();
211 | 
212 |        expect(element.hasClass('has-error')).toBe(true);
213 |        expect(scope.myForm.firstName.$invalid).toBe(true);
214 |        expect(element[0][0].nextSibling.innerHTML === 'Should be no longer than 5 characters!').toBe(true);
215 |      });
216 | 
217 |      it('should not show message from customMessage service', function () {
218 |        scope.myForm.firstName.$setViewValue('John');
219 |        scope.$digest();
220 | 
221 |        expect(element.hasClass('has-error')).toBe(false);
222 |        expect(scope.myForm.firstName.$valid).toBe(true);
223 |      });
224 | 
225 |      it('field invalid message should have higher priority than form invalid message', function () {
226 |        scope.myForm.lastName.$setViewValue('Joseph');
227 |        scope.$digest();
228 | 
229 |        expect(element[0][1].nextSibling.innerHTML === 'The last name is too long!').toBe(true);
230 |      });
231 | 
232 |    });
233 |  });
234 | 
235 | 
236 |  describe('form with attribute "angular-validator-quiet"', function(){
237 |    beforeEach(inject(function ($rootScope, $compile) {
238 |      scope = $rootScope.$new();
239 | 
240 |      htmlForm = angular.element(
241 |        '<form name="myForm" angular-validator angular-validator-quiet>' +
242 |        '<input ng-model="model.firstName" validate-on="dirty" name="firstName" type="text" required ng-maxlength="5"/>' +
243 |        '</form>'
244 |      );
245 | 
246 |      element = $compile(htmlForm)(scope);
247 |      scope.$digest();
248 |    }));
249 | 
250 |    it('should not add generated required label', function(){
251 |        htmlForm.triggerHandler('submit');
252 | 
253 |        expect(element[0][0].nextSibling).toBeFalsy();
254 |    });
255 |  });
256 | 
257 |  describe('form with attribute "angular-validator-quiet"', function(){
258 |    beforeEach(inject(function ($rootScope, $compile) {
259 |      scope = $rootScope.$new();
260 | 
261 |      htmlForm = angular.element(
262 |        '<form name="myForm" angular-validator>' +
263 |        '<input ng-model="model.firstName" validate-on="dirty" name="firstName" type="text" required ng-maxlength="5"/>' +
264 |        '<input ng-model="model.lastName" validate-on="dirty" name="firstName" type="text" required ng-maxlength="5" angular-validator-quiet/>' +
265 |        '</form>'
266 |      );
267 | 
268 |      element = $compile(htmlForm)(scope);
269 |      scope.$digest();
270 |    }));
271 | 
272 |    it('should not add generated required label', function(){
273 |      htmlForm.triggerHandler('submit');
274 | 
275 |      expect(element[0][1].nextSibling).toBeFalsy();
276 |    });
277 |  });
278 | });


--------------------------------------------------------------------------------