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

Commit e0d0b76

Browse files
ghiscodingghiscoding
committed
Added isolated scope - Fixed issue #35, #37, #38
- Added possibility to use own isolated scope (issue #37 and #26). - Fixed an implementation issue found from last revision (issue #35). - Fixed email validation (issue #38). - Fixed a performance issue found with onBlur which would run as much validations as there was characters inside the input when onBlur was called (abcdef => would make 6 validations) and this was extremely costly with a Remote validation call. - Update the code of Remote validation to also accept the "As" alias "remote:vm.customRemoteValidation". - Finally added and updated a few Protractor tests to cover all of the above and more.
1 parent 00514f6 commit e0d0b76

31 files changed

+425
-128
lines changed

‎app.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ myApp.controller('Ctrl', ['$location', '$route', '$scope', '$translate', functio
3838
// -- Controller to use Angular-Validation Directive
3939
// -----------------------------------------------
4040
myApp.controller('CtrlValidationDirective', ['$q', '$scope', 'validationService', function ($q, $scope, validationService) {
41-
$scope.$validationOptions = { debounce: 1500 }; // you can change default debounce globally
41+
$scope.$validationOptions = { debounce: 1500, preValidateFormElements: false }; // you can change default debounce globally
4242

4343
$scope.submitForm = function() {
4444
if(new validationService().checkFormValidity($scope.form1)) {
@@ -67,6 +67,9 @@ myApp.controller('CtrlValidationDirective', ['$q', '$scope', 'validationService'
6767
// -- Controller to use Angular-Validation Directive with 2 forms
6868
// ---------------------------------------------------------------
6969
myApp.controller('Ctrl2forms', ['$scope', 'validationService', function ($scope, validationService) {
70+
// on this page we will pre-validate the form and show all errors on page load
71+
$scope.$validationOptions = { debounce: 500, preValidateFormElements: true };
72+
7073
$scope.submitForm = function() {
7174
if(new validationService().checkFormValidity($scope.form01)) {
7275
alert('All good, proceed with submit...');
@@ -103,7 +106,7 @@ myApp.controller('CtrlValidationService', ['$q', '$scope', '$translate', 'valida
103106
// #3 .addValidator({ elmName: 'inputX', rules: 'myRules'})
104107
// the available object properties are the exact same set as the directive except that they are camelCase
105108
myValidation
106-
.setGlobalOptions({ debounce: 1500, scope: $scope })
109+
.setGlobalOptions({ debounce: 1500, scope: $scope, isolatedScope: $scope, preValidateFormElements: false })
107110
.addValidator({ elmName: 'input2', debounce: 3000, rules: 'numeric_signed|required'})
108111
.addValidator('input3', 'float_signed|between_num:-0.6,99.5|required')
109112
.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')

‎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.3.26",
3+
"version": "1.3.27",
44
"author": "Ghislain B.",
55
"description": "Angular-Validation Directive and Service (ghiscoding)",
66
"main": [

‎changelog.txt

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,5 @@ Angular-Validation change logs
2727
1.3.23 (2015-05-05) Added option to display only last error message instead of all messages at once. Fixed a bug where changing route on View/Controller would make the ValidationSummary fail when coming back to original View/Controller, this bug was associated to the fact that the ValidationSummary kept growing from Controller to Controller, now this ValidationSummary is wipe out as soon as we detect a route change.
2828
1.3.24 (2015-05-17) Replaced all `:param` inside each locale translations with a better standard of {0}, {1}, etc.. like C# `String.Format()`. Added a full Protractor End-to-End test suite (1000+ asserts). Fixed a few minor bugs found with Protractor test cases. Fixed issue #36, bower.json scripts in wrong order.
2929
1.3.25 (2015-05-19) Enhancement #34 to add Remote Validation and updated Protractor to cover this new feature.
30-
1.3.26 (2015-05-30) Added enhancement #35 - PreValidate the Form, display all errors on page load.
30+
1.3.26 (2015-05-30) Added enhancement #35 - PreValidate the Form, display all errors on page load.
31+
1.3.27 (2015-06-02) Added possibility to use own isolated scope (issue #37 and #26). Fixed an implementation issue found from last revision (issue #35). Fixed email validation (issue #38). Fixed a performance issue found with onBlur which would run as much validations as there was characters inside the input when onBlur was called (abcdef => would make 6 validations) and this was extremely costly with a Remote validation call. Revisited the Remote validation to accept also the "As" alias "remote:vm.customRemoteValidation". Finally added and updated a few Protractor tests to cover all of the above and more.

‎dist/angular-validation.min.js

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

‎full-tests/app.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $
77
.when('/validate-Directive', { templateUrl: 'Directive.html', controller: 'CtrlValidationDirective' })
88
.when('/validate-Service', { templateUrl: 'Service.html', controller: 'CtrlValidationService' })
99
.otherwise({ redirectTo: 'validate-Directive' });
10+
}])
11+
.config(['$compileProvider', function ($compileProvider) {
12+
$compileProvider.debugInfoEnabled(false);
1013
}])
1114
.config(['$translateProvider', function ($translateProvider) {
1215
$translateProvider.useStaticFilesLoader({

‎full-tests/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ <h1>Angular-Validation Directive|Service (ghiscoding)</h1>
4545

4646
<!-- Angular-Validation -->
4747
<script type="text/javascript" src="../dist/angular-validation.min.js"></script>
48-
<!--
48+
<!--
4949
<script type="text/javascript" src="../src/validation-directive.js"></script>
5050
<script type="text/javascript" src="../src/validation-service.js"></script>
5151
<script type="text/javascript" src="../src/validation-common.js"></script>

‎locales/validation/en.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"INVALID_EXACT_LEN": "Must have a length of exactly {0} characters. ",
3434
"INVALID_FLOAT": "May only contain a positive float value (integer excluded). ",
3535
"INVALID_FLOAT_SIGNED": "May only contain a positive or negative float value (integer excluded). ",
36-
"INVALID_IBAN": "Must a valid IBAN. ",
36+
"INVALID_IBAN": "Must be a valid IBAN. ",
3737
"INVALID_INPUT_MATCH": "Confirmation field does not match specified field \"{0}\". ",
3838
"INVALID_INTEGER": "Must be a positive integer. ",
3939
"INVALID_INTEGER_SIGNED": "Must be a positive or negative integer. ",
@@ -56,6 +56,7 @@
5656
"AREA1": "TextArea: Alphanumeric + Minimum(15) + Required",
5757
"ERRORS": "Errors",
5858
"CHANGE_LANGUAGE": "Change language",
59+
"FORM_PREVALIDATED": "Form is pre-validated",
5960
"INPUT1": "Remote validation - Type \"abc\" for a valid answer ",
6061
"INPUT2": "Number positive or negative -- input type=\"number\" -- Error on non-numeric characters ",
6162
"INPUT3": "Floating number range (integer excluded) -- between_num:x,y OR min_num:x|max_num:y ",

‎locales/validation/es.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"AREA1": "Area de texto: Alfanúmerica + Minimo(15) + Requerido",
5757
"ERRORS": "Errores",
5858
"CHANGE_LANGUAGE": "Cambiar idioma",
59+
"FORM_PREVALIDATED": "La forma es pre-validado",
5960
"INPUT1": "Validación Remota - Escriba \"abc\" para una respuesta válida ",
6061
"INPUT2": "Número positivo o negativo -- input type=\"number\" -- Error o caracteres no númericos ",
6162
"INPUT3": "Rango decimal (Los números enteros no son validos) -- between_num:x,y ó min_num:x|max_num:y ",

‎locales/validation/fr.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"AREA1": "TextArea: Alphanumérique + Minimum(15) + Required",
5757
"ERRORS": "Erreurs",
5858
"CHANGE_LANGUAGE": "Changer de langue",
59+
"FORM_PREVALIDATED": "Formulaire est pré-validé",
5960
"INPUT1": "Validation à Distance - Taper \"abc\" pour une réponse valide ",
6061
"INPUT2": "Nombre positif ou négatif -- input type=\"number\" -- Erreur sur caractères non-numérique",
6162
"INPUT3": "Intervalle de Nombre Flottant (entier exclu) -- between_num:x,y OU min_num:x|max_num:y",

‎locales/validation/no.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"AREA1": "TextArea: Alfanumerisk + Minimum(15) + Påkrevd",
5757
"ERRORS": "Feil",
5858
"CHANGE_LANGUAGE": "Endre språk.",
59+
"FORM_PREVALIDATED": "Form er pre-godkjent",
5960
"INPUT1": "Ekstern Validering - Type \"abc\" for et gyldig svar ",
6061
"INPUT2": "Positivt eller negativt nummer -- input type=\"number\" -- Feil på ikke-numeriske tegn ",
6162
"INPUT3": "Flyttalssutvalg (heltall ekskludert) -- between_num:x,y eller min_num:x|max_num:y ",

‎locales/validation/ru.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"AREA1": "TextArea: Буквенно-цифровой + Минимум(15) + Обязательно + Обязательно для заполнения",
5757
"ERRORS": "Ошибки",
5858
"CHANGE_LANGUAGE": "Изменить язык",
59+
"FORM_PREVALIDATED": "Форма предварительно подтверждено",
5960
"INPUT1": "дистанционное проверки - введите \"abc\" для действительного ответа ",
6061
"INPUT2": "Число положительное или отрицательное -- input type=\"number\" -- Ошибка на не числовых значениях ",
6162
"INPUT3": "Диапазон дробного числа (включая целые) -- between_num:x,y или min_num:x|max_num:y ",

‎more-examples/dynamicForm-app.js renamed to ‎more-examples/dynamic-form/app.js

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,32 @@ var app = angular.module('plunker', ['ui.bootstrap','ghiscoding.validation', 'pa
44

55
app.config(['$translateProvider', function ($translateProvider) {
66
$translateProvider.useStaticFilesLoader({
7-
prefix: '../locales/validation/',
7+
prefix: '../../locales/validation/',
88
suffix: '.json'
99
});
1010

1111
// load English ('en') table on startup
1212
$translateProvider.preferredLanguage('en');
13+
}])
14+
.config(['$compileProvider', function ($compileProvider) {
15+
$compileProvider.debugInfoEnabled(false);
1316
}]);
1417

15-
app.directive('formField',function(){
16-
return{
18+
app.directive('formField',function() {
19+
return {
1720
restrict:'E',
18-
templateUrl:"dynamicFormView.html"
21+
templateUrl:"template.html"
1922
}
2023
});
2124

2225
app.controller('MainCtrl', function($scope,validationService) {
2326
$scope.name = 'World';
2427
$scope.items={};
25-
$scope.items.item1={
28+
$scope.items.item1 = {
2629
heading:"Item1",
2730
formName:"Form1"
2831
};
29-
$scope.items.item1.fields=[
32+
$scope.items.item1.fields = [
3033
{
3134
name: 'firstName',
3235
label:'Enter First Name',
@@ -38,11 +41,11 @@ app.controller('MainCtrl', function($scope,validationService) {
3841
validation:"required"
3942
}
4043
];
41-
$scope.items.item2={
44+
$scope.items.item2 = {
4245
heading:"Item2",
4346
formName:"Form2"
4447
};
45-
$scope.items.item2.fields=[
48+
$scope.items.item2.fields = [
4649
{
4750
name: 'email',
4851
label:'Enter Email Id',
@@ -55,16 +58,19 @@ app.controller('MainCtrl', function($scope,validationService) {
5558
}
5659
];
5760

58-
$scope.validate=function(){
59-
for(var key in $scope.items){
61+
// redefine which scope to use inside the Angular-Validation
62+
$scope.$validationOptions = { isolatedScope: $scope };
63+
64+
$scope.validate=function() {
65+
for(var key in $scope.items) {
6066
var formName=$scope.items[key].formName;
61-
var form = angular.element(document.querySelector('[name="'+formName+'"]'));
62-
var childScope = form.scope();
63-
console.debug(childScope[formName]);
64-
if(new validationService().checkFormValidity(childScope[formName]))
65-
alert("form "+formName+" is valid");
66-
else
67-
alert("form "+formName+" is invalid");
67+
68+
if(new validationService().checkFormValidity($scope[formName])) {
69+
$scope[formName].isValid = true;
70+
}
71+
else {
72+
$scope[formName].isValid = false;
73+
}
6874
}
6975
};
7076
});

‎more-examples/dynamic-form/index.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html ng-app="plunker">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>AngularJS Plunker</title>
6+
<script>document.write('<base href="' + document.location + '" />');</script>
7+
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="../../style.css">
9+
</head>
10+
11+
<body ng-controller="MainCtrl">
12+
<div class="container">
13+
<br/>
14+
<div class="alert alert-info alert-dismissable">
15+
<span class="glyphicon glyphicon-link" aria-hidden="true"></span>
16+
<a href="https://github.com/ghiscoding/angular-validation/wiki/Isolated-Scope">Wiki - Isolated Scope</a>
17+
<br/>
18+
<span class="glyphicon glyphicon-link" aria-hidden="true"></span>
19+
<a href="https://github.com/ghiscoding/angular-validation/wiki/Form-Submit-and-Validation">Wiki - Form Submit and Validation</a>
20+
</div>
21+
22+
<h3>Form Validation (with dynamic form and fields)</h3>
23+
<tabset>
24+
<tab ng-repeat="tab in items" heading="{{tab.heading}}" id="{{tab.heading}}" >
25+
<form name="{{tab.formName}}" novalidate>
26+
<div ng-repeat="field in tab.fields" >
27+
<form-field></form-field>
28+
</div>
29+
</form>
30+
</tab>
31+
</tabset>
32+
<button name="validateForms" value="Validate" ng-click="validate()">Validate</button>
33+
34+
<hr/>
35+
36+
<div>
37+
<h4>Forms are Valid after Submit</h4>
38+
<span><label>Form1 isValid:</label> {{ Form1.isValid }} </span><br/>
39+
<span><label>Form2 isValid:</label> {{ Form2.isValid }} </span>
40+
</div>
41+
</div>
42+
<!-- external librairies CDN -->
43+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
44+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
45+
<script type="text/javascript" src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
46+
47+
<!-- angular-translate -->
48+
<!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
49+
<script src="../../vendors/angular-translate/angular-translate.min.js"></script>
50+
<script src="../../vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>
51+
52+
<!-- Angular-Validation -->
53+
<script type="text/javascript" src="../../dist/angular-validation.min.js"></script>
54+
<!--
55+
<script type="text/javascript" src="../../src/validation-directive.js"></script>
56+
<script type="text/javascript" src="../../src/validation-service.js"></script>
57+
<script type="text/javascript" src="../../src/validation-common.js"></script>
58+
<script type="text/javascript" src="../../src/validation-rules.js"></script>
59+
-->
60+
61+
<script src="app.js"></script>
62+
</body>
63+
64+
</html>

‎more-examples/dynamicFormView.html renamed to ‎more-examples/dynamic-form/template.html

File renamed without changes.

‎more-examples/dynamicInput-app.js renamed to ‎more-examples/dynamic-input/app.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var myApp = angular.module('myApp', ['ngRoute', 'pascalprecht.translate', 'ghisc
44

55
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
66
$routeProvider.when('/dynamic', {
7-
templateUrl: 'dynamicInputTemplate.html',
7+
templateUrl: 'template.html',
88
controller: 'CtrlDynamic'
99
});
1010
$routeProvider.otherwise({
@@ -13,7 +13,7 @@ myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $
1313
}])
1414
.config(['$translateProvider', function ($translateProvider) {
1515
$translateProvider.useStaticFilesLoader({
16-
prefix: '../locales/validation/',
16+
prefix: '../../locales/validation/',
1717
suffix: '.json'
1818
});
1919

‎more-examples/dynamicInputIndex.html renamed to ‎more-examples/dynamic-input/index.html

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<title>Angular-Validation</title>
66
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
7-
<link rel="stylesheet" href="../style.css">
7+
<link rel="stylesheet" href="../../style.css">
88
</head>
99

1010
<body>
@@ -27,18 +27,19 @@ <h3 class="text-info">{{'CHANGE_LANGUAGE' | translate}}</h3>
2727

2828
<!-- angular-translate -->
2929
<!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
30-
<script src="../vendors/angular-translate/angular-translate.min.js"></script>
31-
<script src="../vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>
30+
<script src="../../vendors/angular-translate/angular-translate.min.js"></script>
31+
<script src="../../vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>
3232

3333
<!-- Angular-Validation -->
34-
<script type="text/javascript" src="../dist/angular-validation.min.js"></script>
35-
<!--<script type="text/javascript" src="../src/validation-directive.js"></script>
36-
<script type="text/javascript" src="../src/validation-service.js"></script>
37-
<script type="text/javascript" src="../src/validation-common.js"></script>
38-
<script type="text/javascript" src="../src/validation-rules.js"></script>-->
34+
<script type="text/javascript" src="../../dist/angular-validation.min.js"></script>
35+
36+
<!--<script type="text/javascript" src="../../src/validation-directive.js"></script>
37+
<script type="text/javascript" src="../../src/validation-service.js"></script>
38+
<script type="text/javascript" src="../../src/validation-common.js"></script>
39+
<script type="text/javascript" src="../../src/validation-rules.js"></script>-->
3940

4041
<!-- my application -->
41-
<script type="text/javascript" src="dynamicInput-app.js"></script>
42+
<script type="text/javascript" src="app.js"></script>
4243
</div>
4344
</body>
4445
</html>

‎more-examples/dynamicInputTemplate.html renamed to ‎more-examples/dynamic-input/template.html

File renamed without changes.

‎more-examples/dynamicFormIndex.html

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎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.3.26",
3+
"version": "1.3.27",
44
"author": "Ghislain B.",
55
"description": "Angular-Validation Directive and Service (ghiscoding)",
66
"main": "app.js",

0 commit comments

Comments
 (0)