This repository has been archived by the owner on Jul 1, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
1 parent
fda90d0
commit 2d9ba48
Showing
16 changed files
with
697 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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' />" } | ||
| ]; | ||
| }]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 > 0"> | ||
| <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</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><valid-array-require-how-many="one"></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><valid-array-require-how-many="all"></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><valid-array-require-how-many="<b>one</b>"> (default), if 1 value is found good, the complete input set is Valid.</li> | ||
| <li><valid-array-require-how-many="<b>all</b>">. 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | ||
| } | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.