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

Commit 86c16f7

Browse files
ghiscodingghiscoding
committed
Huge rewrite to add Service functionality
- Added Service functionality (same implementation as Directive) - Added `debounce` as new alias for `typingLimit` - Extrated the validation rules into it's own separate file - Extrated common functions into a shared file by Directive & Service - Lot of refactoring
1 parent ca97edd commit 86c16f7

File tree

12 files changed

+1667
-571
lines changed

12 files changed

+1667
-571
lines changed

‎angular-validation.js‎

Lines changed: 560 additions & 0 deletions
Large diffs are not rendered by default.

‎app.js‎

Lines changed: 70 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,20 @@
22

33
var myApp = angular.module('myApp', ['ngRoute', 'pascalprecht.translate', 'ghiscoding.validation']);
44

5-
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
6-
$routeProvider.when('/validate', {
7-
templateUrl: 'templates/testingForm.html',
8-
controller: 'Ctrl'
9-
});
10-
$routeProvider.otherwise({
11-
redirectTo: 'validate',
12-
});
5+
myApp.config(['$compileProvider', '$locationProvider', '$routeProvider', function ($compileProvider, $locationProvider, $routeProvider) {
6+
$compileProvider.debugInfoEnabled(false);
7+
$routeProvider
8+
.when('/validate-directive', {
9+
templateUrl: 'templates/testingFormDirective.html',
10+
controller: 'Ctrl'
11+
})
12+
.when('/validate-service', {
13+
templateUrl: 'templates/testingFormService.html',
14+
controller: 'CtrlValidationService'
15+
})
16+
.otherwise({
17+
redirectTo: 'validate-directive',
18+
});
1319
}])
1420
.config(['$translateProvider', function ($translateProvider) {
1521
$translateProvider.useStaticFilesLoader({
@@ -21,10 +27,63 @@ myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $
2127
$translateProvider.preferredLanguage('en');
2228
}]);
2329

24-
myApp.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
25-
$scope.form1 = {};
26-
30+
// -- Main Controller for Angular-Validation Directive
31+
// ---------------------------------------------------
32+
myApp.controller('Ctrl', ['$location', '$scope', '$translate', 'validationService', function ($location, $scope, $translate) {
2733
$scope.switchLanguage = function (key) {
2834
$translate.use(key);
2935
};
36+
$scope.goto = function ( path ) {
37+
$location.path( path );
38+
};
39+
}]);
40+
41+
42+
// -- Controller to use Angular-Validation Service
43+
// -----------------------------------------------
44+
45+
// exact same testing form used except that all validators are programmatically added inside controller via Angular-Validation Service
46+
myApp.controller('CtrlValidationService', ['$scope', '$translate', 'validationService', function ($scope, $translate, validationService) {
47+
// start by creating the service
48+
var myValidation = new validationService();
49+
50+
// you can create indepent call to the validation service
51+
myValidation.addValidator({
52+
elmName: 'input2',
53+
debounce: 3000,
54+
scope: $scope,
55+
rules: 'numeric_signed|required'
56+
});
57+
58+
// you can also chain validation service and add multiple validators at once
59+
// we optionally start by defining some global options. Note: each validator can overwrite individually these properties (ex.: validatorX can have a `debounce` different than the global set)
60+
// there is 2 ways to write a call... #1 with elementName & rules defined as 2 strings arguments ... #2 with 1 object as argument (with defined property names)
61+
// #1 .addValidtor('myElementName', 'myRules') ... #2 .addValidator({ elmName: 'inputX', rules: 'myRules'})
62+
// the available object properties are the exact same set as the directive except that they are camelCase
63+
myValidation
64+
.setGlobalOptions({ debounce: 1500, scope: $scope })
65+
.addValidator('input3', 'float_signed|between_num:-0.6,99.5|required')
66+
.addValidator('input4', 'exact_len:4|regex:YYWW:=^(0[9]|1[0-9]|2[0-9]|3[0-9])(5[0-2]|[0-4][0-9])$:regex|required|integer')
67+
.addValidator('input5', 'email|required|min_len:6')
68+
.addValidator('input6', 'url|required')
69+
.addValidator('input7', 'ipv4|required')
70+
.addValidator('input8', 'credit_card|required')
71+
.addValidator('input9', 'between_len:2,6|required')
72+
.addValidator('input10', 'date_iso|required')
73+
.addValidator('input11', 'date_us_long|required')
74+
.addValidator('input12', 'time')
75+
.addValidator('select1', 'required')
76+
.addValidator('select2', 'required')
77+
.addValidator({elmName: 'input13', rules: 'min_len:5|max_len:10|alpha_dash_spaces|required', validationErrorTo: ".validation-input13"})
78+
.addValidator('input14', 'alpha|required')
79+
.addValidator('input15', 'alpha|min_len:3|required')
80+
.addValidator('input16', 'match:input15,Password|required')
81+
.addValidator({elmName: 'input17', rules: 'alpha_spaces|exact_len:3|required', debounce: 5000})
82+
.addValidator('area1', 'alpha_dash_spaces|min_len:15|required');
83+
84+
85+
$scope.removeInputValidator = function ( elmName ) {
86+
// remove a single element (string) OR you can also remove multiple elements through an array type .removeValidator(['input2','input3'])
87+
myValidation.removeValidator(elmName);
88+
};
3089
}]);

‎index.html‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,49 @@
22
<html ng-app="myApp" ng-strict-di ng-cloak>
33
<head>
44
<meta charset="utf-8">
5-
<title>Angular-Validation</title>
5+
<title>Angular-Validation (ghiscoding)</title>
66
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
77
<link rel="stylesheet" href="style.css">
88
</head>
99

1010
<body ng-controller="Ctrl">
1111
<div class="container">
12-
<h1>Angular Validation (ghiscoding)</h1>
13-
<a href="https://github.com/ghiscoding/angular-validation">Ghiscoding Github Project</a> | <a href="http://plnkr.co/edit/jADq7H?p=preview">Plunker Live Demo</a>
12+
<h1>Angular-Validation Directive|Service (ghiscoding)</h1>
13+
<a href="https://github.com/ghiscoding/angular-validation">Ghiscoding Github Project</a> |
14+
<a href="http://plnkr.co/edit/jADq7H?p=preview">Plunker Live Demo</a>
15+
1416
<hr/>
15-
<h3 class="text-info">{{'CHANGE_LANGUAGE' | translate}}</h3>
16-
<div class="btn-group">
17+
18+
<span class="text-info"><strong>{{'CHANGE_LANGUAGE' | translate}}: </strong></span>
19+
<div class="btn-group btn-group-sm">
1720
<button type="button" class="btn btn-default" ng-click="switchLanguage('fr')">Français</button>
1821
<button type="button" class="btn btn-default" ng-click="switchLanguage('en')">English</button>
1922
</div>
23+
24+
<span class="text-info" style="margin-left: 20px"><strong>Type: </strong></span>
25+
<div class="btn-group btn-group-sm">
26+
<button type="button" class="btn btn-default" ng-click="goto('/validate-directive')">Directive</button>
27+
<button type="button" class="btn btn-default" ng-click="goto('/validate-service')">Service</button>
28+
</div>
2029

2130
<br/><hr/>
2231

2332
<ng-view></ng-view>
2433

2534
<!-- external librairies CDN -->
26-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
27-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-route.js"></script>
35+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
36+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
2837

2938
<!-- angular-translate -->
3039
<!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
3140
<script src="vendors/angular-translate/angular-translate.min.js"></script>
3241
<script src="vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>
3342

34-
<!-- angular-validation -->
35-
<script type="text/javascript" src="src/angular-validation.js"></script>
43+
<!-- angular-validation, directive and service are totally you can load one or the other or you can use them in parallel too. But `-common.js` and `-rules.js` are mandatory. -->
44+
<script type="text/javascript" src="src/validation-directive.js"></script>
45+
<script type="text/javascript" src="src/validation-service.js"></script>
46+
<script type="text/javascript" src="src/validation-common.js"></script>
47+
<script type="text/javascript" src="src/validation-rules.js"></script>
3648

3749
<!-- my application -->
3850
<script type="text/javascript" src="app.js"></script>

‎locales/validation/en.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040

4141
"AREA1": "TextArea: Alphanumeric + Minimum(15) + Required",
4242
"CHANGE_LANGUAGE": "Change language.",
43-
"INPUT1": "Alphanumeric + Exactly(3) + Required -- typing-limit(5sec)",
4443
"INPUT2": "Number positive or negative -- input type=\"number\" -- Error on non-numeric characters ",
4544
"INPUT3": "Floating number range (integer excluded) -- between_num:x,y OR min_num:x|max_num:y ",
4645
"INPUT4": "Multiple Validations + Custom Regex of Date Code (YYWW)",
@@ -55,7 +54,8 @@
5554
"INPUT13": "AlphaDashSpaces + Required + Minimum(5) Characters -- MUST USE: validation-error-to=\" \"",
5655
"INPUT14": "Alphanumeric + Required -- NG-DISABLED",
5756
"INPUT15": "Password",
58-
"INPUT16": "Password Confirmation",
57+
"INPUT16": "Password Confirmation",
58+
"INPUT17": "Alphanumeric + Exactly(3) + Required -- debounce(5sec)",
5959
"SAVE": "Save",
6060
"SELECT1": "Required (select) -- NoEVENT default(keyup) -- Directive will validate has EVENT (blur)",
6161
"SELECT2": "Required (select) -- EVENT (blur)"

‎locales/validation/fr.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040

4141
"AREA1": "TextArea: Alphanumérique + Minimum(15) + Required",
4242
"CHANGE_LANGUAGE": "Changer de langue.",
43-
"INPUT1": "Alphanumérique + Exactement(3) + Requis -- typing-limit(5sec)",
4443
"INPUT2": "Nombre positif ou négatif -- input type=\"number\" -- Erreur sur caractères non-numérique",
4544
"INPUT3": "Intervalle de Nombre Flottant (entier exclu) -- between_num:x,y OU min_num:x|max_num:y",
4645
"INPUT4": "Multiple Validations + Regex Personnalisé d'un Code Date (AASS)",
@@ -55,7 +54,8 @@
5554
"INPUT13": "AlphaDashSpaces + Requis + Minimum(5) Caractères -- DOIT UTILISER: validation-error-to=\" \"",
5655
"INPUT14": "Alphanumérique + Requis -- NG-DISABLED",
5756
"INPUT15": "Mot de Passe",
58-
"INPUT16": "Mot de Passe (Confirmation)",
57+
"INPUT16": "Mot de Passe (Confirmation)",
58+
"INPUT17": "Alphanumérique + Exactement(3) + Requis -- debounce(5sec)",
5959
"SAVE": "Sauvegarder",
6060
"SELECT1": "Requis (select) -- Aucun EVENT défaut(keyup) -- Directive va valider avec EVENT (blur)",
6161
"SELECT2": "Requis (select) -- EVENT (blur)"

0 commit comments

Comments
 (0)