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

Commit 9fcd5f8

Browse files
ghiscodingghiscoding
committed
Added validation-callback (#79), added #81, #82
- Added new validation-callback attribute, runs after the debounce/blur and validaiton are completed - Added possibility passing arguments to Custom & Remote validators - Added new Global Options: hideErrorUnderInputs
1 parent ebd9cfc commit 9fcd5f8

20 files changed

+735
-108
lines changed

‎app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ myApp.controller('CtrlValidationService', ['$q', '$scope', '$translate', 'valida
117117
// friendlyName: $translate.instant('FIRST_NAME'),
118118
debounce: 1000,
119119
scope: $scope,
120-
rules: 'alpha|min_len:2|remote:customRemoteValidationCall|required'
120+
rules: 'alpha|min_len:2|remote:customRemoteValidationCall()|required'
121121
});
122122

123123
// you can also chain validation service and add multiple validators at once

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-validation-ghiscoding",
3-
"version": "1.4.13",
3+
"version": "1.4.14",
44
"author": "Ghislain B.",
55
"description": "Angular-Validation Directive and Service (ghiscoding)",
66
"main": [

‎dist/angular-validation.min.js

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎more-examples/customRemote/app.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
'use strict';
2+
3+
var myApp = angular.module('myApp', ['ghiscoding.validation', 'pascalprecht.translate', 'ui.bootstrap']);
4+
// --
5+
// configuration
6+
myApp.config(['$compileProvider', function ($compileProvider) {
7+
$compileProvider.debugInfoEnabled(false);
8+
}])
9+
.config(['$translateProvider', function ($translateProvider) {
10+
$translateProvider.useStaticFilesLoader({
11+
prefix: '../../locales/validation/',
12+
suffix: '.json'
13+
});
14+
// load English ('en') table on startup
15+
$translateProvider.preferredLanguage('en').fallbackLanguage('en');
16+
$translateProvider.useSanitizeValueStrategy('escapeParameters');
17+
}]);
18+
19+
// --
20+
// Directive
21+
myApp.controller('CtrlDirective', ['$q', 'validationService', function ($q, validationService) {
22+
var vmd = this;
23+
vmd.model = {};
24+
25+
// use the validationService only to declare the controllerAs syntax
26+
var vs = new validationService({ controllerAs: vmd, debounce: 500 });
27+
28+
vmd.myRemoteValidation1 = function() {
29+
var deferred = $q.defer();
30+
setTimeout(function() {
31+
var isValid = (vmd.model.input1 === "abc") ? true : false;
32+
deferred.resolve({ isValid: isValid, message: 'Returned error from promise.'});
33+
}, 500);
34+
35+
return deferred.promise;
36+
}
37+
38+
vmd.myRemoteValidation2 = function() {
39+
var deferred = $q.defer();
40+
setTimeout(function() {
41+
var isValid = (vmd.model.input2 === "def") ? true : false;
42+
deferred.resolve({ isValid: isValid, message: 'Returned error from promise.'});
43+
}, 500);
44+
45+
return deferred.promise;
46+
}
47+
48+
vmd.submitForm = function() {
49+
if(vs.checkFormValidity(vmd.form1)) {
50+
alert('All good, proceed with submit...');
51+
}
52+
}
53+
}]);
54+
55+
// --
56+
// Service
57+
myApp.controller('CtrlService', ['$scope', '$q', 'validationService', function ($scope, $q, validationService) {
58+
var vms = this;
59+
vms.model = {};
60+
61+
// use the validationService only to declare the controllerAs syntax
62+
var vs = new validationService({ controllerAs: vms, debounce: 500 });
63+
64+
vs.setGlobalOptions({ scope: $scope })
65+
.addValidator('input3', 'alpha|min_len:2|remote:vms.myRemoteValidation3():alt=Alternate error message.|required')
66+
.addValidator('input4', 'alpha|min_len:2|remote:vms.myRemoteValidation4()|required');
67+
68+
vms.myRemoteValidation3 = function() {
69+
var deferred = $q.defer();
70+
setTimeout(function() {
71+
var isValid = (vms.model.input3 === "abc") ? true : false;
72+
deferred.resolve({ isValid: isValid, message: 'Returned error from promise.'});
73+
}, 500);
74+
75+
return deferred.promise;
76+
}
77+
78+
vms.myRemoteValidation4 = function() {
79+
var deferred = $q.defer();
80+
setTimeout(function() {
81+
var isValid = (vms.model.input4 === "def") ? true : false;
82+
deferred.resolve({ isValid: isValid, message: 'Returned error from promise.'});
83+
}, 500);
84+
85+
return deferred.promise;
86+
}
87+
88+
vms.submitForm = function() {
89+
if(new validationService().checkFormValidity(vms.form2)) {
90+
alert('All good, proceed with submit...');
91+
}
92+
}
93+
}]);

‎more-examples/customRemote/index.html

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html ng-app="myApp" ng-strict-di ng-cloak="">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Angular-Validation with Remote Validation</title>
6+
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../../style.css">
8+
</head>
9+
10+
<body>
11+
<div class="container">
12+
<h2>Example of Angular-Validation with Remote Validation</h2>
13+
14+
<div ng-controller="CtrlDirective as vmd">
15+
<h3>Directive</h3>
16+
<div class="alert alert-danger alert-dismissable" ng-show="vmd.form1.$validationSummary.length &gt; 0">
17+
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
18+
<h4><strong>ERRORS!</strong></h4>
19+
<ul>
20+
<li ng-repeat="item in vmd.form1.$validationSummary">{{ item.field }}: {{item.message}}</li>
21+
</ul>
22+
</div>
23+
24+
<form name="vmd.form1">
25+
<div class="form-group">
26+
<p>Type '<b>abc</b>' for a valid answer </p>
27+
<label for="input1">Remote Validation (error msg using alt:)</label>
28+
<input type="text" class="form-control"
29+
name="input1"
30+
ng-model="vmd.model.input1"
31+
placeholder="alpha|min_len:2|remote:vmd.myRemoteValidation1|required"
32+
validation="alpha|min_len:2|remote:vmd.myRemoteValidation1:alt=Alternate error message.|required" />
33+
<span ng-if="vmd.form1.input1.$processing">
34+
<span class="glyphicon glyphicon-refresh spinning"></span>
35+
</span>
36+
</div>
37+
<br/>
38+
<div class="form-group">
39+
<p>Type '<b>def</b>' for a valid answer </p>
40+
<label for="input2">Remote Validation (error msg declared in custom function)</label>
41+
<!-- same as previous but defined as `javascript` and error message is declared directly in the custom function -->
42+
<input type="text" class="form-control"
43+
name="input2"
44+
ng-model="vmd.model.input2"
45+
placeholder="alpha|min_len:2|remote:vmd.myRemoteValidation2()|required"
46+
validation="alpha|min_len:2|remote:vmd.myRemoteValidation2()|required" />
47+
<span ng-if="vmd.form1.input2.$processing">
48+
<span class="glyphicon glyphicon-refresh spinning"></span>
49+
</span>
50+
</div>
51+
<div class="form-actions">
52+
<button type="submit" name="btn_ngDisabled1" class="btn btn-primary" ng-disabled="vmd.form1.$invalid" >{{ 'SAVE' | translate }} (ngDisabled)</button>
53+
<button type="submit" name="btn_ngSubmit1" class="btn btn-primary" ng-click="vmd.submitForm()">{{ 'SAVE' | translate }} (ngSubmit)</button>
54+
</div>
55+
</form>
56+
</div>
57+
58+
<hr/>
59+
60+
<div ng-controller="CtrlService as vms">
61+
<h3>Service</h3>
62+
<div class="alert alert-danger alert-dismissable" ng-show="vms.form2.$validationSummary.length &gt; 0">
63+
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
64+
<h4><strong>ERRORS!</strong></h4>
65+
<ul>
66+
<li ng-repeat="item in vms.form2.$validationSummary">{{ item.field }}: {{item.message}}</li>
67+
</ul>
68+
</div>
69+
70+
<form name="vms.form2">
71+
<div class="form-group">
72+
<p>Type '<b>abc</b>' for a valid answer </p>
73+
<label for="input3">Remote Validation (error msg using alt:)</label>
74+
<input type="text" class="form-control"
75+
name="input3"
76+
ng-model="vms.model.input3"
77+
placeholder="alpha|min_len:2|remote:vms.myRemoteValidation3()|required" />
78+
<span ng-if="vms.form2.input3.$processing">
79+
<span class="glyphicon glyphicon-refresh spinning"></span>
80+
</span>
81+
</div>
82+
<br/>
83+
<div class="form-group">
84+
<p>Type '<b>def</b>' for a valid answer </p>
85+
<label for="input4">Remote Validation (error msg declared in custom function)</label>
86+
<!-- same as previous but defined as `javascript` and error message is declared directly in the custom function -->
87+
<input type="text" class="form-control"
88+
name="input4"
89+
ng-model="vms.model.input4"
90+
placeholder="alpha|min_len:2|remote:vms.myRemoteValidation4()|required" />
91+
<span ng-if="vms.form2.input4.$processing">
92+
<span class="glyphicon glyphicon-refresh spinning"></span>
93+
</span>
94+
</div>
95+
<div class="form-actions">
96+
<button type="submit" name="btn_ngDisabled2" class="btn btn-primary" ng-disabled="vms.form2.$invalid" >{{ 'SAVE' | translate }} (ngDisabled)</button>
97+
<button type="submit" name="btn_ngSubmit2" class="btn btn-primary" ng-click="vms.submitForm()">{{ 'SAVE' | translate }} (ngSubmit)</button>
98+
</div>
99+
</form>
100+
</div>
101+
</div>
102+
103+
<!-- external librairies CDN -->
104+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
105+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
106+
107+
<!-- angular-translate -->
108+
<!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
109+
<script src="../../vendors/angular-translate/angular-translate.min.js"></script>
110+
<script src="../../vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>
111+
112+
<!-- Angular-UI -->
113+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.js"></script>
114+
115+
<!-- Angular-Validation -->
116+
<script type="text/javascript" src="../../dist/angular-validation.min.js"></script>
117+
<!--
118+
<script type="text/javascript" src="../../src/validation-directive.js"></script>
119+
<script type="text/javascript" src="../../src/validation-service.js"></script>
120+
<script type="text/javascript" src="../../src/validation-common.js"></script>
121+
<script type="text/javascript" src="../../src/validation-rules.js"></script>
122+
-->
123+
124+
<!-- my application -->
125+
<script type="text/javascript" src="app.js"></script>
126+
</body>
127+
</html>

‎more-examples/customValidation/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ myApp.controller('CtrlDirective', ['validationService', function (validationServ
4949
myApp.controller('CtrlService', ['$scope', 'validationService', function ($scope, validationService) {
5050
var vms = this;
5151
vms.model = {};
52-
//vms.model.input3 = 'a';
52+
5353
// use the validationService only to declare the controllerAs syntax
5454
var vs = new validationService({ controllerAs: vms });
5555

‎more-examples/customValidation/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99

1010
<body>
1111
<div class="container">
12-
<div ng-controller="CtrlDirective as vmd">
13-
<h2>Example of Angular-Validation with Custom Javascript function</h2>
12+
<h2>Example of Angular-Validation with Custom Javascript function</h2>
1413

14+
<div ng-controller="CtrlDirective as vmd">
1515
<h3>Directive</h3>
1616
<div class="alert alert-danger alert-dismissable" ng-show="vmd.form1.$validationSummary.length &gt; 0">
1717
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

‎more-examples/validationCallback/app.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use strict';
2+
3+
var myApp = angular.module('myApp', ['ngRoute', 'ngSanitize', 'ghiscoding.validation', 'pascalprecht.translate']);
4+
myApp.config(['$compileProvider', '$locationProvider', '$routeProvider', function ($compileProvider, $locationProvider, $routeProvider) {
5+
$compileProvider.debugInfoEnabled(false);
6+
}])
7+
.config(['$translateProvider', function ($translateProvider) {
8+
$translateProvider.useStaticFilesLoader({
9+
prefix: '../../locales/validation/',
10+
suffix: '.json'
11+
});
12+
// load English ('en') table on startup
13+
$translateProvider.preferredLanguage('en').fallbackLanguage('en');
14+
$translateProvider.useSanitizeValueStrategy('escapeParameters');
15+
}]);
16+
17+
18+
19+
myApp.controller('ctrlDirective', [function () {
20+
var vmd = this;
21+
22+
vmd.onChange = function(index) {
23+
vmd.formValid1 = vmd.form1.$valid;
24+
vmd.fullName1 = vmd.firstName1 + ' ' + vmd.lastName1;
25+
return index;
26+
}
27+
}]);
28+
29+
myApp.controller('ctrlService', [function () {
30+
var vms = this;
31+
32+
vms.onChange = function() {
33+
vms.formValid2 = vms.form2.$valid;
34+
vms.fullName2 = vms.firstName2 + ' ' + vms.lastName2;
35+
}
36+
}]);

‎more-examples/validationCallback/index.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html ng-app="myApp">
3+
4+
<head>
5+
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
6+
<link rel="stylesheet" href="../../style.css">
7+
</head>
8+
9+
<body>
10+
<div class="container">
11+
<h2>Example of Validation Callback</h2>
12+
13+
<div ng-controller="ctrlDirective as vmd">
14+
<h3>Directive</h3>
15+
16+
<form name="vmd.form1" role="form"novalidate>
17+
<label>First name :</label>
18+
<input type="text" name="firstName1" ng-model="vmd.firstName1" validation-callback="vmd.onChange" validation="required:alt=First name is required">
19+
<label>Last name :</label>
20+
<input type="text" name="lastName1" ng-model="vmd.lastName1" validation="required:alt=Last name is required" validation-callback="vmd.onChange()">
21+
<button type="submit" name="btn_ngDisabled1" class="btn btn-primary" ng-disabled="vmd.form1.$invalid" >Save</button>
22+
</form>
23+
24+
<strong>Callback results</strong>
25+
<div>
26+
Form is valid: {{ vmd.formValid1 }}
27+
</div>
28+
<div>
29+
Full Name: {{ vmd.fullName1 }}
30+
</div>
31+
</div>
32+
33+
<hr/>
34+
35+
<div ng-controller="ctrlService as vms">
36+
<h3>Service</h3>
37+
38+
<form name="vms.form2" role="form"novalidate>
39+
<label>First name :</label>
40+
<input type="text" name="firstName2" ng-model="vms.firstName2" validation-callback="vms.onChange()" validation="required:alt=First name is required">
41+
<label>Last name :</label>
42+
<input type="text" name="lastName2" ng-model="vms.lastName2" validation="required:alt=Last name is required" validation-callback="vms.onChange()">
43+
<button type="submit" name="btn_ngDisabled2" class="btn btn-primary" ng-disabled="vms.form2.$invalid" >Save</button>
44+
</form>
45+
46+
<strong>Callback results</strong>
47+
<div>
48+
Form is valid: {{ vms.formValid2 }}
49+
</div>
50+
<div>
51+
Full Name: {{ vms.fullName2 }}
52+
</div>
53+
</div>
54+
55+
</div>
56+
<!-- external librairies CDN -->
57+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
58+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
59+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.js"></script>
60+
61+
<!-- angular-translate -->
62+
<!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
63+
<script src="../../vendors/angular-translate/angular-translate.min.js"></script>
64+
<script src="../../vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>
65+
66+
<!-- Angular-UI -->
67+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.js"></script>
68+
69+
<!-- Angular-Validation -->
70+
<script type="text/javascript" src="../../dist/angular-validation.min.js"></script>
71+
<!--
72+
<script type="text/javascript" src="../../src/validation-directive.js"></script>
73+
<script type="text/javascript" src="../../src/validation-service.js"></script>
74+
<script type="text/javascript" src="../../src/validation-common.js"></script>
75+
<script type="text/javascript" src="../../src/validation-rules.js"></script>
76+
-->
77+
78+
<!-- my application -->
79+
<script type="text/javascript" src="app.js"></script>
80+
</body>
81+
82+
</html>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-validation-ghiscoding",
3-
"version": "1.4.13",
3+
"version": "1.4.14",
44
"author": "Ghislain B.",
55
"description": "Angular-Validation Directive and Service (ghiscoding)",
66
"main": "app.js",

0 commit comments

Comments
 (0)