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

Commit

Permalink
Tested with AngularJS 1.4.x branch & fixed #55
Browse files Browse the repository at this point in the history
- Made sure  Angular-Validation works with AngularJS 1.4.x branch,
updated my Rev to 1.4.x branch as well
- Also fixed issue #55, ui bootsrap datepicker and angular-validation
  • Loading branch information
ghiscoding committed Aug 7, 2015
1 parent f0504cd commit 113eb95
Show file tree
Hide file tree
Showing 13 changed files with 171 additions and 39 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.3.39",
"version": "1.4.0",
"author": "Ghislain B.",
"description": "Angular-Validation Directive and Service (ghiscoding)",
"main": [
Expand Down
1 change: 1 addition & 0 deletions changelog.txt
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
Angular-Validation change logs

1.4.0 (2015-08-06) Tested with AngularJS 1.4.x branch. Also fixed issue #55 - ui bootsrap datepicker and angular-validation.
1.3.39 (2015-07-28) Fixed issue #54 - display alt text as HTML instead of escaped text, changed from `.text()` to `.html()`
1.3.38 (2015-07-28) Fixed issue #52 - Changed default behavior of `ngDisabled` which was displaying error message right after an element became enabled, it will still pre-validate but not directly show the error message unless `preValidateFormElements` is set to True. Fixed issue #53 - To support `ngIf` (add a trigger on element `$destroy`).
1.3.37 (2015-07-21) Fixed a small IE8 problem with "catch" being a reserved word.
Expand Down
6 changes: 3 additions & 3 deletions dist/angular-validation.min.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions full-tests/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ <h1>Angular-Validation Directive|Service (ghiscoding)</h1>
<ng-view></ng-view>

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

<!-- angular-translate -->
<!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
Expand Down
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ <h1>Angular-Validation Directive|Service (ghiscoding)</h1>
<ng-view></ng-view>

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

<!-- angular-translate -->
<!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
Expand Down
48 changes: 48 additions & 0 deletions more-examples/angular-ui-calendar/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
'use strict';

var myApp = angular.module('myApp', ['ghiscoding.validation', 'pascalprecht.translate', 'ui.bootstrap']);

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',
['$scope', '$translate', 'validationService', '$timeout',
function ($scope, $translate, validationService, $timeout) {
var vm = this;
vm.model = {};
vm.validationRequired = false;
vm.isChangeDatePickerOpen = false;
vm.datePickerFormat = 'dd/MM/yyyy';
vm.dateOptions = { formatYear: 'yy' };

vm.minDate = new Date(); // 10 years ago
vm.minDate.setHours(0,0,0,0);
vm.minDate.setMonth(vm.minDate.getMonth() - 12 * 10);
vm.maxDate = new Date(); // now
vm.maxDate.setHours(0,0,0,0);

this.openDatePicker = function($event) {
console.log("openDatePicker()", vm.isChangeDatePickerOpen);
$event.preventDefault();
$event.stopPropagation();
vm.isChangeDatePickerOpen = true;
};

var validation = new validationService({
controllerAs: vm,
preValidateFormElements: false
});

vm.checkboxChange = function() {
validation.checkFormValidity(vm.test); // force validation
}
}]);
83 changes: 83 additions & 0 deletions more-examples/angular-ui-calendar/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!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="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="../../style.css">
</head>

<body ng-controller="Ctrl as vm">
<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>
<hr/>
<form name="vm.test">
<label class="control-label">Date</label>
<div class="input-group">
<input
type="text"
id="dateOfChange"
name="dateOfChange"
class="form-control"
validation="required|date_euro_long_between:{{vm.minDate | date:'dd/MM/yyyy'}},{{vm.maxDate | date:'dd/MM/yyyy'}}"
validation-error-to="dateOfChangeValidation"
ng-model="vm.model.dateOfChange"
datepicker-popup="{{vm.datePickerFormat}}"
datepicker-options="vm.dateOptions"
datepicker-mode="'day'"
is-open="vm.isChangeDatePickerOpen"
min-date="vm.minDate"
max-date="vm.maxDate"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
data-ng-click="vm.openDatePicker($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<div id="dateOfChangeValidation" class="validation text-danger"></div>
</form>


<br/>
<br/>
<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>

<ng-view></ng-view>
</div>

<!-- external librairies CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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>

<!-- Angular-UI -->
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.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>
4 changes: 2 additions & 2 deletions more-examples/dynamic-form/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ <h4>Forms are Valid after Submit</h4>
</div>

<!-- external librairies CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.js"></script>
<script type="text/javascript" src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>

<!-- angular-translate -->
Expand Down
4 changes: 2 additions & 2 deletions more-examples/dynamic-input/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ <h3 class="text-info">{{'CHANGE_LANGUAGE' | translate}}</h3>
</div>

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

<!-- angular-translate -->
<!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
Expand Down
4 changes: 2 additions & 2 deletions more-examples/interpolateValidation/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ <h4><strong>ERRORS!</strong></h4>
</div>

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

<!-- angular-translate -->
<!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
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.3.39",
"version": "1.4.0",
"author": "Ghislain B.",
"description": "Angular-Validation Directive and Service (ghiscoding)",
"main": "app.js",
Expand Down
6 changes: 3 additions & 3 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
#Angular Validation (Directive / Service)
`Version: 1.3.39`
`Version: 1.4.0`
### Form validation after user inactivity of default 1sec. (customizable timeout)

Forms Validation with Angular made easy! Angular-Validation is an angular directive/service with locales (languages) with a very simple approach of defining your `validation=""` directly within your element to validate (input, textarea, etc) and...that's it!!! The directive/service will take care of the rest!
Expand Down Expand Up @@ -62,12 +62,12 @@ Another awesome feature recently added is the [Remote Validation (AJAX)](https:/


## Angular-Validation Wiki
All the documentation has been moved to the Wiki section, see the [github wiki](https://github.com/ghiscoding/angular-validation/wiki) for more explanation.
All the documentation has been moved to the Wiki section, see the [github wiki](https://github.com/ghiscoding/angular-validation/wiki) for more explanation. If you just started with the project, then the most important page to read would be the [HOWTO - Step by Step](https://github.com/ghiscoding/angular-validation/wiki/HOWTO---Step-by-Step)

**Wiki Contents**
* [Angular-Validation Wiki](https://github.com/ghiscoding/angular-validation/wiki)
* Installation
* [HOWTO - Step by Step](https://github.com/ghiscoding/angular-validation/wiki/Include-it-in-your-Angular-Application)
* [HOWTO - Step by Step](https://github.com/ghiscoding/angular-validation/wiki/HOWTO---Step-by-Step)
* [Bower/NuGet Packages](https://github.com/ghiscoding/angular-validation/wiki/Download-and-Install-it)
* [Locales (languages)](https://github.com/ghiscoding/angular-validation/wiki/Locales-(languages))
* Code Samples
Expand Down
42 changes: 21 additions & 21 deletions src/validation-common.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ angular

// user could pass his own scope, useful in a case of an isolate scope
if (!!scope && (!!_globalOptions.isolatedScope || !!_globalOptions.scope)) {
this.scope = (!!_globalOptions.isolatedScope) ? _globalOptions.isolatedScope : _globalOptions.scope; // overwrite original scope (isolatedScope/scope are equivalent arguments)
this.scope = _globalOptions.isolatedScope || _globalOptions.scope; // overwrite original scope (isolatedScope/scope are equivalent arguments)
_globalOptions = mergeObjects(scope.$validationOptions, _globalOptions); // reuse the validationOption from original scope
}

Expand Down Expand Up @@ -109,7 +109,7 @@ angular
}

// get the rules(or validation), inside directive it's named (validation), inside service(rules)
var rules = (self.validatorAttrs.hasOwnProperty('rules')) ? self.validatorAttrs.rules : self.validatorAttrs.validation;
var rules = self.validatorAttrs.rules || self.validatorAttrs.validation;

// We first need to see if the validation holds a custom user regex, if it does then deal with it first
// So why deal with it separately? Because a Regex might hold pipe '|' and so we don't want to mix it with our regular validation pipe
Expand Down Expand Up @@ -258,7 +258,7 @@ angular
function removeFromValidationSummary(elmName, validationSummaryObj) {
var self = this;
var form = getElementParentForm(elmName, self); // find the parent form (only found if it has a name)
var vsObj = (!!validationSummaryObj) ? validationSummaryObj : _validationSummary;
var vsObj = validationSummaryObj || _validationSummary;

var index = arrayFindObjectIndex(vsObj, 'field', elmName); // find index of object in our array
// if message is empty, remove it from the validation summary object
Expand Down Expand Up @@ -412,24 +412,30 @@ angular
: self.elm.attr('name');

var formElmObj = getFormElementByName(elmName);
var rules = self.validatorAttrs.hasOwnProperty('rules') ? self.validatorAttrs.rules : self.validatorAttrs.validation;
var rules = self.validatorAttrs.rules || self.validatorAttrs.validation;

// loop through all validators (could be multiple)
for (var j = 0, jln = self.validators.length; j < jln; j++) {
validator = self.validators[j];

if (validator.type === "conditionalDate") {
// 1- we first need to validate that the Date input is well formed through regex
// run the Regex test through each iteration, if required (\S+) and is null then it's invalid automatically
regex = new RegExp(validator.pattern);
isValid = ((!validator.pattern || validator.pattern.toString() === "/\\S+/" || (!!rules && validator.pattern === "required")) && strValue === null) ? false : regex.test(strValue);
var isWellFormed = isValid = false;

// 1- make sure Date is well formed (if it's already a Date object then it's already good, else check that with Regex)
if((strValue instanceof Date)) {
isWellFormed = true;
}else {
// run the Regex test through each iteration, if required (\S+) and is null then it's invalid automatically
regex = new RegExp(validator.pattern);
isWellFormed = ((!validator.pattern || validator.pattern.toString() === "/\\S+/" || (!!rules && validator.pattern === "required")) && strValue === null) ? false : regex.test(strValue);
}

// 2- date is valid, then we can do our conditional date check
if (isValid) {
// 2- date is well formed, then go ahead with conditional date check
if (isWellFormed) {
// For Date comparison, we will need to construct a Date Object that follows the ECMA so then it could work in all browser
// Then convert to timestamp & finally we can compare both dates for filtering
var dateType = validator.dateType; // date type (ISO, EURO, US-SHORT, US-LONG)
var timestampValue = parseDate(strValue, dateType).getTime(); // our input value parsed into a timestamp
var timestampValue = (strValue instanceof Date) ? strValue : parseDate(strValue, dateType).getTime(); // our input value parsed into a timestamp

// if 2 params, then it's a between condition
if (validator.params.length == 2) {
Expand Down Expand Up @@ -517,7 +523,7 @@ angular

if (isValid === false) {
formElmObj.isValid = false;
errorMsg += (!!result.message) ? result.message : altText;
errorMsg += result.message || altText;

// is field is invalid and we have an error message given, then add it to validationSummary and display error
addToValidationAndDisplayError(self, formElmObj, errorMsg, false, showError);
Expand All @@ -539,7 +545,7 @@ angular
// or finally it might be a regular regex pattern checking
else {
// get the ngDisabled attribute if found
var elmAttrNgDisabled = (typeof self.attrs !== "undefined") ? self.attrs.ngDisabled : self.validatorAttrs.ngDisabled;
var elmAttrNgDisabled = (!!self.attrs) ? self.attrs.ngDisabled : self.validatorAttrs.ngDisabled;

// a 'disabled' element should always be valid, there is no need to validate it
if (!!self.elm.prop("disabled") || !!self.scope.$eval(elmAttrNgDisabled)) {
Expand Down Expand Up @@ -979,10 +985,7 @@ angular
function stringPrototypeFormat() {
var args = (Array.isArray(arguments[0])) ? arguments[0] : arguments;
return this.replace(/{(\d+)}/g, function (match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
return (!!args[number]) ? args[number] : match;
});
}

Expand All @@ -996,10 +999,7 @@ angular
var args = (Array.isArray(arguments[1])) ? arguments[1] : Array.prototype.slice.call(arguments, 1);

return format.replace(/{(\d+)}/g, function (match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
return (!!args[number]) ? args[number] : match;
});
}

Expand Down

0 comments on commit 113eb95

Please sign in to comment.