You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jul 1, 2020. It is now read-only.
1.1.0: only start validating after user inactivity, it could also be passed as an argument for more customization of the inactivity timeout (typing-limit).
4
+
1.3.0: support to Angular 1.3.x
5
+
1.3.1: Added Input Match (confirmation) Validator
6
+
1.3.2: Float number validator to also permit dot (.) as first char. Also removed keyboard blocking of invalid character on input type="number" instead display error message.
7
+
1.3.3: Updated Bootstrap(3.3.1) and AngularJS(1.3.7) to latest versions
8
+
1.3.4: Removed the necessity of creating a <span> for displaying the error message, the directive now handles it by itself.
9
+
1.3.5: Throw an error message when user did not provide a name="" property inside the element to validate.
10
+
1.3.6: Added ng-strict-di for minification, renamed some files and folder lib to /vendors, moved directive into new /src folder for better separation.
11
+
1.3.7: Complete rewrite (but same functionality) so that I could add an Angular-Validation Service which is similar implementation as the Directive. Also added `debounce` attribute which is an alias to `typingLimit`, validation rules are now defined as an external service for better maintainability and also created a common file for shared functions by both Validation Directive and Service.
Copy file name to clipboardExpand all lines: readme.md
+22-22Lines changed: 22 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,34 +1,34 @@
1
-
#Angular Validation (Directive and Service)
2
-
### Form validation after user inactivity (customizable timeout)
1
+
#Forms Angular Validation (Directive / Service)
3
2
`Version: 1.3.7`
3
+
### Form validation after user inactivity (customizable timeout)
4
4
5
-
Angular Validation made easy! AngularValidation is an angular directive with locales (languages) with a simple approach of defining your `validation=""` directly within your element to validate (input, textarea, etc) and...that's it!!! The directive will take care of the rest!
5
+
Forms Validation with Angular made easy! Angular-Validation is an angular directive/service with locales (languages) with a simple approach of defining your `validation=""` directly within your element to validate (input, textarea, etc) and...that's it!!! The directive/service will take care of the rest!
6
6
7
-
The base concept is not new, it comes from the easy form input validation approach of Laravel Framework as well as PHP Gump Validation. They both are built in PHP and use a very simple approach, so why not use the same concept over Angular as well? Well now it is available and with some extras.
7
+
The base concept is not new, it comes from the easy form input validation approach of Laravel Framework as well as PHP Gump Validation. They both are built in PHP and use a very simple approach, so why not use the same concept over Angular as well? Well now it is available with some extras.
8
8
9
-
For a smoother user experience, I also added validation on inactivity (timer). So validation will not bother the user while he is still typing... but as soon as the user makes a pause for a certain amount of time, then validation comes into play. This feature is only while typing, if user is focusing out of the input (onBlur) it will validate instantly.
9
+
For a smoother user experience, I also added validation on inactivity (timer/debounce). So validation will not bother the user while he is still busy typing... though as soon as the user makes a pause, for a certain amount of time, then validation comes into play. It's worth noting that this inactivity timer is only available while typing, if user focuses away of his form input (onBlur) it will validate instantly.
10
10
11
-
Now also supporting AngularJS 1.3.x
11
+
Supporting AngularJS 1.3.x
12
12
*current code should work with 1.2.x just the same but is no more verified*
13
13
14
-
Now support <b>Service</b> using the same functionality as the Directive.
14
+
Now support <b>Service</b> using the same functionality as the <b>Directive</b>.
15
15
Huge rewrite of the code to better separate the code and also adding support to Service functionality. Specifically the `validation-rules` to add rules without affecting the core and `validation-common` for shared functions (shared by Directive/Service).
16
16
17
+
<aname="plunker"></a>
17
18
## Live Demo
18
19
[Plunker](http://plnkr.co/jADq7H)
19
-
<aname="live_demo"></a>
20
20
21
21
## Requirements
22
-
Angular-Validation requires the element that will use validation to have a `name=""` attribute, so that it can use this name to associate a `<span>` for error displaying. For example: `<input name="input1" ng-model="input1" validation="validator1" />`.
22
+
Angular-Validation requires the element that will use validation to have a `name=""` attribute, so that in the background it can use this name to properly associate a `<span>` right after this input for error displaying. For example: `<input name="input1" ng-model="input1" validation="validator1" />`.
23
23
24
-
*The necessity of `name=""` attribute is new since version 1.3.4+, prior to this change we were asking the user to create his own `<span>` for error displaying. For a better understanding, the `<span>` is now optional, but the `name=""` attribute becomes mandatory and will throw an error if omitted*
24
+
*The necessity of `name=""` attribute is new since version 1.3.4+, prior to this change we were asking the user to create his own `<span>` for error displaying. In other words, the `<span>` is now optional, but the `name=""` attribute becomes mandatory and will throw an error if omitted*
25
25
26
26
27
27
## Some Working Examples (Directive)
28
28
Let's start with a simple example and then let's get down to real business.
29
29
30
-
P.S. For real live sample, see the [live demo](#live_demo) or download the Github project and run the `index.html` (on the exception of Chrome who doesn't want to run http outside of webserver) while the actual form with validation is inside `templates/testingFormDirective.html` for a better separation.
31
30
<aname="examples"></a>
31
+
P.S. For real live sample, see the [live plunker demo](#plunker) or download the Github project and run the `index.html` (on the exception of Chrome who doesn't want to run http outside of webserver) while the actual form with validation is inside `templates/testingFormDirective.html` for a better separation.
32
32
```html
33
33
<!-- example 1 -->
34
34
<!-- change the debounce or typing-limit (timer in ms of inactivity) after which will trigger the validation check -->
@@ -81,9 +81,9 @@ P.S. For real live sample, see the [live demo](#live_demo) or download the Githu
81
81
<!-- EXCEPTIONS: We could also use our own custom <span> or <div> element when needed, for example input groups wrapper, see next step -->
82
82
```
83
83
84
-
## Service Working Examples (Service)
85
-
P.S. For real live sample, see the [live demo](#live_demo) or download the Github project and run the `index.html` (on the exception of Chrome who doesn't want to run http outside of webserver) while the actual form with validation is inside `templates/testingFormService.html` for a better separation.
86
84
<aname="examples-service"></a>
85
+
## Other Working Examples (Service)
86
+
P.S. For real live sample, see the [live demo](#plunker) or download the Github project and run the `index.html` (on the exception of Chrome who doesn't want to run http outside of webserver) while the actual form with validation is inside `templates/testingFormService.html` for a better separation.
87
87
```javascript
88
88
// start by creating the service
89
89
var myValidation =newvalidationService();
@@ -150,16 +150,16 @@ Well let's face it, having the `<span>` for error display right after the elemen
150
150
<aname="regex"></a>
151
151
Regular Expressions (Regex)
152
152
--------------------
153
-
From the example displayed, I introduce the custom regular expression, there is no limitation on regex itself and you can even use the pipe " | " within it and without being scared of interfering with the other validation filters BUT you have to follow a specific pattern (a writing pattern that is), and if you don't, well it will fail. Let's explain how it works...
153
+
From the example displayed, I introduce the custom regular expression, there is no limitation on regex itself and you can even use the pipe " | " within it and without being scared of interfering with the other validation filters BUT you have to follow a specific pattern (a writing pattern that is), and if you don't, well it will simply fail. Let's explain how it works...
154
154
155
155
Regex validation is divided in 4 specific parts (Step #1-4).
156
156
157
157
Let's use the previous [Examples](#examples)#5 and extract the information out of it to see how it works.
158
158
Step #1-4 are for explanation only, at the end we show the full regex (make sure there is no spaces).
159
159
160
-
1. Start and End the filter with the following `regex: :regex` which tells the directive where to extract it.
160
+
1. Start & end the filter with the following `regex: :regex` which tells the directive where to extract it.
161
161
162
-
2. Custom error message `YYWW` (what do we want to display to the user)
162
+
2. Custom error message `YYWW` (what do we want to display to the user, it will be appended to INVALID_PATTERN, refer to the translation file. In english it will display the following: Must be following this format: YYWW)
163
163
164
164
3. Followed by a separator which basically says... after `:=` separator comes the regex pattern
165
165
@@ -172,7 +172,7 @@ Locales (languages)
172
172
--------------------
173
173
Locales are simply sets of language defined in external JSON files, we can easily add any new language as extra files without affecting the behaviour of the angular directive. You could even change displayed language on the fly, well of course the error message will be reflected only after field value is re-evaluated. You of course have to include the `angular-translate` library and configure it, see section [Include it in your Project](#project)
174
174
175
-
Note: To be fully localized, I should add the country code at the end of my JSON filename and then change the suffix on the `angular-translate``loader` method, but then this would add an overhead and I prefer to keep it simple as validation messages often looks the same anyway. If you do want to be fully localized, then see the example in [Include it in your Project](#project)
175
+
NOTE: To be fully localized, I should add the country code at the end of my JSON filename and then change the suffix on the `angular-translate``loader` method, but then this would add an overhead and I prefer to keep it simple as validation messages often looks the same anyway. If you do want to be fully localized, then see the example in [Include it in your Project](#project)
176
176
177
177
```javascript
178
178
// define a key, could be on the fly with a button or a menu link
@@ -183,12 +183,12 @@ $scope.switchLanguage = function (key) {
183
183
};
184
184
```
185
185
186
-
P.S. If you define a new Language set, please make a pull request and I would be happy to add them in current project... It would be nice to have Spanish, German or even Chinese :) Thank you.
186
+
*P.S. If you define a new Language set, please make a pull request and I would be happy to add them in current project... It would be nice to have Spanish, German or even Chinese :) Thank you.*
187
187
188
188
Available Validators
189
189
--------------------
190
190
All validators are written as `snake_case` but it's up to the user's taste and could also be written as `camelCase`. So for example `alpha_dash_spaces` and `alphaDashSpaces` are both equivalent.
191
-
##### NOTE: on an input type="number", the "+" sign is an invalid character (browser limitation) even if you are using a `signed` validator. If you really wish to use the "+", then change your input to type="text".
191
+
##### NOTE: on an `input type="number"`, the "+" sign is an invalid character (browser restriction) even if you are using a `signed` validator. If you really wish to use the "+", then change your input to a `type="text"`.
192
192
*`alpha` Only alpha characters (including latin) are present (a-z, A-Z)
193
193
*`alpha_spaces` Only alpha characters (including latin) and spaces are present (a-z, A-Z)
194
194
*`alpha_num` Only alpha-numeric characters (including latin) are present (a-z, A-Z, 0-9)
@@ -197,7 +197,7 @@ All validators are written as `snake_case` but it's up to the user's taste and c
*`date_iso` Ensure date follows the ISO format (yyyy-mm-dd)
202
202
*`date_us_long` Ensure date follows the US long format (mm-dd-yyyy) or (mm/dd/yyyy)
203
203
*`date_us_short` Ensure date follows the US short format (mm-dd-yy) or (mm/dd/yy)
@@ -216,7 +216,7 @@ All validators are written as `snake_case` but it's up to the user's taste and c
216
216
*`ipv6` Check for valid IP (IPv6)
217
217
*`ipv6_hex` Check for valid IP (IPv6 Hexadecimal)
218
218
*`match:n` Match another input field(n), where (n) must be the exact ngModel attribute of input field to compare to.
219
-
*`match:n,t` Match another input field(n), same as (match:n) but also include (t) for alternative text to be displayed.
219
+
*`match:n,t` Match another input field(n), same as (match:n) but also include (t) for alternative text to be displayed in the error message.
220
220
*`max_len:n` Checks field length, no longer than specified length where (n) is length parameter.
221
221
*`max_num:n` Checks numeric value to be lower or equal than the number (n).
222
222
*`min_len:n` Checks field length, no shorter than specified length where (n) is length parameter.
@@ -273,4 +273,4 @@ License
273
273
*[1.3.4](https://github.com/ghiscoding/angular-validation/commit/ba30d55ddb8bca44a8032fc8253356450bd4e1d4)`2015-01-06` Removed the necessity of creating a `<span>` for displaying the error message, the directive now handles it by itself.
274
274
*[1.3.5](https://github.com/ghiscoding/angular-validation/commit/679b24ca4daee8419731c45d1d65d63cb5ca74a5)`2015-01-26` Throw an error message when user did not provide a `name=""` property inside the element to validate.
275
275
*[1.3.6](https://github.com/ghiscoding/angular-validation/commit/e47e91f45f93a3f191ab6849d06163563674e9e2)`2015-02-09` Added `ng-strict-di` for minification, renamed some files and folder lib to `/vendors`, moved directive into new `/src` folder for better separation.
276
-
*[1.3.7](https://github.com/ghiscoding/angular-validation/commit/86c16f720d6687d3b5ca93e49a0a37824027e583)`2015-03-08` Complete rewrite (but same functionality) so that I could add an Angular-Validation Service which is similar implementation as the Directive. Also added `debounce` attribute which is an alias to `typingLimit`, validation rules are now defined as an external service for better maintainability and easily be used by both Validation Directive and Service, also created a common file for shared functions.
276
+
*[1.3.7](https://github.com/ghiscoding/angular-validation/commit/86c16f720d6687d3b5ca93e49a0a37824027e583)`2015-03-08` Complete rewrite (but same functionality) so that I could add an Angular-Validation Service which is similar implementation as the Directive. Also added `debounce` attribute which is an alias to `typingLimit`, validation rules are now defined as an external service for better maintainability and also created a common file for shared functions by both Validation Directive and Service.
0 commit comments