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

Commit

Permalink
3rd party addon validation #57, #66, #67
Browse files Browse the repository at this point in the history
- Can now validate external 3rd party addons, asked in issue #57, #66,
#67 (like: ngTagsInput, Angular Multiselect, Dropdown multi-select,
etc....)
- Also fixed some French translations #73
  • Loading branch information
ghiscoding committed Oct 5, 2015
1 parent fda90d0 commit 2d9ba48
Show file tree
Hide file tree
Showing 16 changed files with 697 additions and 153 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-validation-ghiscoding",
"version": "1.4.8",
"version": "1.4.9",
"author": "Ghislain B.",
"description": "Angular-Validation Directive and Service (ghiscoding)",
"main": [
Expand Down
10 changes: 5 additions & 5 deletions dist/angular-validation.min.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ <h1>Angular-Validation Directive|Service (ghiscoding)</h1>
<button type="button" name="btn_goto_Service" class="btn btn-default" ng-click="goto('/validate-service')">Service</button>
<button type="button" name="btn_goto_2forms" class="btn btn-default" ng-click="goto('/validate-2forms')">2 Forms</button>
<button type="button" name="btn_goto_ngrepeat" class="btn btn-default" ng-click="goto('/validate-ngRepeat')">ngRepeat</button>
<a name="btn_goto_3rdpartyaddon" class="btn btn-default" href="more-examples/addon-3rdParty/">3rd Party Addon</a>
</div>

<br/><hr/>
Expand Down
48 changes: 24 additions & 24 deletions locales/validation/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,26 @@
"INVALID_BETWEEN_NUM": "Doit être une valeur numérique, entre {0} et {1}. ",
"INVALID_BOOLEAN": "Doit contenir qu'une valeur vraie ou fausse. ",
"INVALID_CREDIT_CARD": "Doit être un numéro de carte de crédit valide. ",
"INVALID_DATE_EURO_LONG": "Doit être un format de date valide (dd-mm-yyyy) OU (dd/mm/yyyy). ",
"INVALID_DATE_EURO_LONG_BETWEEN": "Doit être un format de date valide (dd-mm-yyyy) OU (dd/mm/yyyy) entre {0} et {1}. ",
"INVALID_DATE_EURO_LONG_MAX": "Doit être une date valide (dd-mm-yyyy) OU (dd/mm/yyyy), égale ou inférieure à {0}. ",
"INVALID_DATE_EURO_LONG_MIN": "Doit être une date valide (dd-mm-yyyy) OU (dd/mm/yyyy), égale ou supérieure à {0}. ",
"INVALID_DATE_EURO_SHORT": "Doit être un format de date valide (dd-mm-yy) OU (dd/mm/yy). ",
"INVALID_DATE_EURO_SHORT_BETWEEN": "Doit être un format de date valide (dd-mm-yy) OU (dd/mm/yy) entre {0} et {1}. ",
"INVALID_DATE_EURO_SHORT_MAX": "Doit être une date valide (dd-mm-yy) OU (dd/mm/yy), égale ou inférieure à {0}. ",
"INVALID_DATE_EURO_SHORT_MIN": "Doit être une date valide (dd-mm-yy) OU (dd/mm/yy), égale ou supérieure à {0}. ",
"INVALID_DATE_ISO": "Doit être un format de date valide (yyyy-mm-dd). ",
"INVALID_DATE_ISO_BETWEEN": "Doit être un format de date valide (yyyy-mm-dd) entre {0} et {1}. ",
"INVALID_DATE_ISO_MAX": "Doit être une date valide (yyyy-mm-dd), égale ou inférieure à {0}. ",
"INVALID_DATE_ISO_MIN": "Doit être une date valide (yyyy-mm-dd), égale ou supérieure à {0}. ",
"INVALID_DATE_US_LONG": "Doit être un format de date valide (mm/dd/yyyy) OU (mm-dd-yyyy). ",
"INVALID_DATE_US_LONG_BETWEEN": "Doit être un format de date valide (mm/dd/yyyy) OU (mm-dd-yyyy) entre {0} et {1}. ",
"INVALID_DATE_US_LONG_MAX": "Doit être une date valide (mm/dd/yyyy) OU (mm-dd-yyyy), égale ou inférieure à {0}. ",
"INVALID_DATE_US_LONG_MIN": "Doit être une date valide (mm/dd/yyyy) OU (mm-dd-yyyy), égale ou supérieure à {0}. ",
"INVALID_DATE_US_SHORT": "Doit être un format de date valide (mm/dd/yy) OU (mm-dd-yy). ",
"INVALID_DATE_US_SHORT_BETWEEN": "Doit être un format de date valide (mm/dd/yy) OU (mm-dd-yy) entre {0} et {1}. ",
"INVALID_DATE_US_SHORT_MAX": "Doit être une date valide (mm/dd/yy) OU (mm-dd-yy), égale ou inférieure à {0}. ",
"INVALID_DATE_US_SHORT_MIN": "Doit être une date valide (mm/dd/yy) OU (mm-dd-yy), égale ou supérieure à {0}. ",
"INVALID_DATE_EURO_LONG": "Doit être un format de date valide (jj-mm-aaaa) OU (jj/mm/aaaa). ",
"INVALID_DATE_EURO_LONG_BETWEEN": "Doit être un format de date valide (jj-mm-aaaa) OU (jj/mm/aaaa) entre {0} et {1}. ",
"INVALID_DATE_EURO_LONG_MAX": "Doit être une date valide (jj-mm-aaaa) OU (jj/mm/aaaa), égale ou inférieure à {0}. ",
"INVALID_DATE_EURO_LONG_MIN": "Doit être une date valide (jj-mm-aaaa) OU (jj/mm/aaaa), égale ou supérieure à {0}. ",
"INVALID_DATE_EURO_SHORT": "Doit être un format de date valide (jj-mm-aa) OU (jj/mm/aa). ",
"INVALID_DATE_EURO_SHORT_BETWEEN": "Doit être un format de date valide (jj-mm-aa) OU (jj/mm/aa) entre {0} et {1}. ",
"INVALID_DATE_EURO_SHORT_MAX": "Doit être une date valide (jj-mm-aa) OU (jj/mm/aa), égale ou inférieure à {0}. ",
"INVALID_DATE_EURO_SHORT_MIN": "Doit être une date valide (jj-mm-aa) OU (jj/mm/aa), égale ou supérieure à {0}. ",
"INVALID_DATE_ISO": "Doit être un format de date valide (aaaa-mm-jj). ",
"INVALID_DATE_ISO_BETWEEN": "Doit être un format de date valide (aaaa-mm-jj) entre {0} et {1}. ",
"INVALID_DATE_ISO_MAX": "Doit être une date valide (aaaa-mm-jj), égale ou inférieure à {0}. ",
"INVALID_DATE_ISO_MIN": "Doit être une date valide (aaaa-mm-jj), égale ou supérieure à {0}. ",
"INVALID_DATE_US_LONG": "Doit être un format de date valide (mm/jj/aaaa) OU (mm-jj-aaaa). ",
"INVALID_DATE_US_LONG_BETWEEN": "Doit être un format de date valide (mm/jj/aaaa) OU (mm-jj-aaaa) entre {0} et {1}. ",
"INVALID_DATE_US_LONG_MAX": "Doit être une date valide (mm/jj/aaaa) OU (mm-jj-aaaa), égale ou inférieure à {0}. ",
"INVALID_DATE_US_LONG_MIN": "Doit être une date valide (mm/jj/aaaa) OU (mm-jj-aaaa), égale ou supérieure à {0}. ",
"INVALID_DATE_US_SHORT": "Doit être un format de date valide (mm/jj/aa) OU (mm-jj-aa). ",
"INVALID_DATE_US_SHORT_BETWEEN": "Doit être un format de date valide (mm/jj/aa) OU (mm-jj-aa) entre {0} et {1}. ",
"INVALID_DATE_US_SHORT_MAX": "Doit être une date valide (mm/jj/aa) OU (mm-jj-aa), égale ou inférieure à {0}. ",
"INVALID_DATE_US_SHORT_MIN": "Doit être une date valide (mm/jj/aa) OU (mm-jj-aa), égale ou supérieure à {0}. ",
"INVALID_DIGITS": "Doit être {0} chiffres. ",
"INVALID_DIGITS_BETWEEN": "Doit être entre {0} et {1} chiffres. ",
"INVALID_EMAIL": "Doit être une adresse courriel valide. ",
Expand Down Expand Up @@ -74,17 +74,17 @@
"INPUT7": "IP (IPV4)",
"INPUT8": "Carte de Crédit",
"INPUT9": "Entre(2,6) Caractères",
"INPUT10": "Date ISO (yyyy-mm-dd)",
"INPUT11": "Date US LONG (mm/dd/yyyy)",
"INPUT10": "Date ISO (aaaa-mm-jj)",
"INPUT11": "Date US LONG (mm/jj/aaaa)",
"INPUT12": "Time (hh:mm OU hh:mm:ss) -- NON Requis",
"INPUT13": "AlphaDashSpaces + Requis + Minimum(5) Caractères -- DOIT UTILISER: validation-error-to=\" \"",
"INPUT14": "Alphanumérique + Requis -- NG-DISABLED",
"INPUT15": "Mot de Passe",
"INPUT16": "Mot de Passe (Confirmation)",
"INPUT17": "Different Mot de Passe",
"INPUT18": "Alphanumérique + Exactement(3) + Requis -- debounce(3sec)",
"INPUT19": "Date ISO (yyyy-mm-dd ) -- condition minimal >= 2001-01-01 ",
"INPUT20": "Date US COURT (mm/dd/yy) -- entre les dates 12/01/99 et 12/31/15",
"INPUT19": "Date ISO (aaaa-mm-jj ) -- condition minimal >= 2001-01-01 ",
"INPUT20": "Date US COURT (mm/jj/aa) -- entre les dates 12/01/99 et 12/31/15",
"INPUT21": "Choix dans cette liste (banana,orange,ice cream)",
"FIRST_NAME": "Prénom",
"LAST_NAME": "Nom de Famille",
Expand Down
47 changes: 47 additions & 0 deletions more-examples/addon-3rdParty/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
'use strict';

var myApp = angular.module('myApp', ['ghiscoding.validation', 'pascalprecht.translate', 'ngTagsInput', 'angularjs-dropdown-multiselect',
'hljs', 'isteven-multi-select']);

myApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}])
.config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: '../../locales/validation/',
suffix: '.json'
});
// load English ('en') table on startup
$translateProvider.preferredLanguage('en').fallbackLanguage('en');
}]);

myApp.controller('Ctrl', ['validationService', function (validationService) {
var vm = this;
var myValidation = new validationService({ controllerAs: vm, formName: 'vm.test', preValidateFormElements: false });

vm.tags1 = [
{ id: 1, text: 'Tag1' },
{ id: 2, text: 'Tag2' },
{ id: 3, text: 'Tag3' }
];
vm.tags2 = [
{ id: 1, text: 'Tag7' },
{ id: 2, text: 'Tag8' },
{ id: 3, text: 'abc' }
];

vm.select1model = [];
vm.select1data = [
{id: 1, label: "Joe"},
{id: 2, label: "John"},
{id: 3, label: "Jane"}
];

vm.modernBrowsers = [
{ name: "Opera", maker: "Opera Software", ticked: true, icon: "<img src='https://cdn1.iconfinder.com/data/icons/fatcow/32/opera.png' />" },
{ name: "Internet Explorer", maker: "Microsoft", ticked: false, icon: "<img src='https://cdn1.iconfinder.com/data/icons/fatcow/32/internet_explorer.png' />" },
{ name: "Firefox", maker: "Mozilla Foundation", ticked: false, icon: "<img src='https://cdn1.iconfinder.com/data/icons/humano2/32x32/apps/firefox-icon.png' />" },
{ name: "Safari", maker: "Apple", ticked: false, icon: "<img src='https://cdn1.iconfinder.com/data/icons/fatcow/32x32/safari_browser.png' />" },
{ name: "Chrome", maker: "Google", ticked: false, icon: "<img src='https://cdn1.iconfinder.com/data/icons/google_jfk_icons_by_carlosjj/32/chrome.png' />" }
];
}]);
139 changes: 139 additions & 0 deletions more-examples/addon-3rdParty/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html ng-app="myApp" ng-strict-di ng-cloak="">
<head>
<meta charset="utf-8" />
<title>Angular-Validation Example with Interpolation</title>
<link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<link rel="stylesheet" href="http://isteven.github.io/angular-multi-select/css/isteven-multi-select.css">
</head>

<body ng-controller="Ctrl as vm">
<div class="container">
<h2>Validation examples with external 3rd party addons </h2>

<div class="alert alert-info alert-dismissable">
<span class="glyphicon glyphicon-link" aria-hidden="true"></span>
<a href="https://github.com/ghiscoding/angular-validation/wiki/3rd-Party-Addons">Wiki - 3rd Party Addons</a>
</div>

<div class="alert alert-danger alert-dismissable" ng-show="vm.test.$validationSummary.length &gt; 0">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4><strong>ERRORS!</strong></h4>
<ul>
<li ng-repeat="item in vm.test.$validationSummary">{{ item.friendlyName != '' ? item.friendlyName : item.field }}: {{item.message}}</li>
</ul>
</div>

<hr/>

<form name="vm.test">
<div class="form-group">
<label>
<a href="http://dotansimha.github.io/angularjs-dropdown-multiselect/">(project site)</a>
Dropdown MultiSelect
</label>
<div name="select1"
ng-dropdown-multiselect=""
options="vm.select1data"
selected-model="vm.select1model"
ng-model="vm.select1model"
extra-settings="{externalIdProp: ''}"
validation="in_list:John,Jane|required" validation-array-objprop="label">
</div>
</div>

<div class="form-group">
<label>
<a href="http://isteven.github.io/angular-multi-select/#/main">(project site)</a>
Dropdown AngularJs Multi-Select
</label>
<div name="select2"
isteven-multi-select=""
ng-model="vm.outputBrowsers"
input-model="vm.modernBrowsers"
output-model="vm.outputBrowsers"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
validation="in_list:Firefox,Chrome|required"
validation-array-objprop="name">
</div>
</div>

<div class="form-group">
<label>
<a href="http://mbenford.github.io/ngTagsInput/">(project site)</a>
ngTagsInput
</label>
<i>&lt;valid-array-require-how-many="one"&gt;</i>
<tags-input name="input1"
ng-model="vm.tags1"
validation="in_list:Tag4,Tag5|required"
validation-array-objprop="text">
</tags-input>
</div>

<div id="tag2" class="form-group">
<label>
<a href="http://mbenford.github.io/ngTagsInput/">(project site)</a>
ngTagsInput
</label>
<i>&lt;valid-array-require-how-many="all"&gt;</i>
<tags-input name="input2"
ng-model="vm.tags2"
validation="pattern=/Tag[0-9]/i:alt=Must be a Tag with a number.|required"
validation-array-objprop="text"
valid-array-require-how-many="all">
</tags-input>
</div>
</form>
<hr/>
<div class="form-actions">
<button type="submit" name="save_btn" class="btn btn-primary" ng-disabled="vm.test.$invalid" ng-click="">{{ 'SAVE' | translate }}</button>
</div>
<hr/>

<div class="alert alert-warning alert-dismissable">
<strong>We can validate an input array by 2 ways:</strong>
<ol>
<li>&lt;valid-array-require-how-many="<b>one</b>"&gt; (default), if 1 value is found good, the complete input set is Valid.</li>
<li>&lt;valid-array-require-how-many="<b>all</b>"&gt;. For the input to be Valid, we need "all" array values to be valid.</li>
</ol>
</div>
</div>

<!-- external librairies CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>

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

<!-- ngTagsInput -->
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>

<!-- AngularJS Dropdown MultiSelect -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/pc035860/angular-highlightjs/master/angular-highlightjs.js"></script>
<script src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/src/angularjs-dropdown-multiselect.js"></script>

<!-- AngularJS Multi-Select -->
<script src="https://rawgit.com/isteven/angular-multi-select/master/isteven-multi-select.js"></script>

<!-- Angular-Validation -->
<script type="text/javascript" src="../../dist/angular-validation.min.js"></script>
<!--
<script type="text/javascript" src="../../src/validation-directive.js"></script>
<script type="text/javascript" src="../../src/validation-service.js"></script>
<script type="text/javascript" src="../../src/validation-common.js"></script>
<script type="text/javascript" src="../../src/validation-rules.js"></script>
-->

<!-- my application -->
<script type="text/javascript" src="app.js"></script>
</body>
</html>
6 changes: 3 additions & 3 deletions more-examples/angular-ui-calendar/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
<div class="container">
<h2>Example of Angular-Validation Date validation error after select from ui datepicker.</h2>
<hr/>
<label class="control-label">Min Date {{vm.minDate}}</label>
<label class="control-label">Max Date {{vm.maxDate}}</label>
<label class="control-label">Min Date: {{vm.minDate | date:'dd/MM/yyyy'}}</label> |
<label class="control-label">Max Date {{vm.maxDate | date:'dd/MM/yyyy'}}</label>
<hr/>
<form name="vm.test">
<label class="control-label">Date</label>
Expand Down Expand Up @@ -49,7 +49,7 @@ <h2>Example of Angular-Validation Date validation error after select from ui dat
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4><strong>ERRORS!</strong></h4>
<ul>
<li ng-repeat="item in vm.test.$validationSummary">{{ item.friendlyName != '' ? item.friendlyName : item.field }}: {{item.message}}</li>
<li ng-repeat="item in vm.test.$validationSummary">{{ item.field }}: {{item.message}}</li>
</ul>
</div>

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-validation-ghiscoding",
"version": "1.4.8",
"version": "1.4.9",
"author": "Ghislain B.",
"description": "Angular-Validation Directive and Service (ghiscoding)",
"main": "app.js",
Expand Down
56 changes: 56 additions & 0 deletions protractor/angularUI_spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
describe('Angular-Validation with AngularUI Tests:', function () {
// global variables
var validDate = "01/10/2015";
var invalidOverDate = "03/10/2015";
var invalidTypoDate = "03/10/201";
var invalidDateMsg = "dateOfChange: Needs to be a valid date format (dd-mm-yyyy) OR (dd/mm/yyyy) between 02/10/2005 and 02/10/2015.";

describe('When choosing `more-examples` AngularUI', function () {
it('Should navigate to home page', function () {
browser.get('http://localhost/Github/angular-validation/more-examples/angular-ui-calendar/');

// Find the title element
var titleElement = element(by.css('h2'));

// Assert that the text element has the expected value.
// Protractor patches 'expect' to understand promises.
expect(titleElement.getText()).toEqual('Example of Angular-Validation Date validation error after select from ui datepicker.');
});

it('Should enter valid date expect no errors on input and validation summary', function () {
var elmInput = $('[name=dateOfChange]');
elmInput.sendKeys(validDate);
elmInput.sendKeys(protractor.Key.TAB);

// validation summary should become empty
var itemRows = element.all(by.binding('message'));
expect(itemRows.count()).toBe(0);
});

it('Should enter outside of range date and show dateOfChange error on input and ValidationSummary', function () {
var elmInput = $('[name=dateOfChange]');
elmInput.sendKeys(invalidOverDate);
elmInput.sendKeys(protractor.Key.TAB);

var itemRows = element.all(by.binding('message'));
var inputName;

for (var i = 0, j = 0, ln = itemRows.length; i < ln; i++) {
expect(itemRows.get(i).getText()).toEqual(invalidDateMsg);
}
});

it('Should enter wrong date format and show dateOfChange error on input and ValidationSummary', function () {
var elmInput = $('[name=dateOfChange]');
elmInput.sendKeys(invalidTypoDate);
elmInput.sendKeys(protractor.Key.TAB);

var itemRows = element.all(by.binding('message'));
var inputName;

for (var i = 0, j = 0, ln = itemRows.length; i < ln; i++) {
expect(itemRows.get(i).getText()).toEqual(invalidDateMsg);
}
});
});
});
Loading

0 comments on commit 2d9ba48

Please sign in to comment.