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

Commit

Permalink
Fix disabled="false" as attribute to run validation
Browse files Browse the repository at this point in the history
evaluate the disabled="false" attribute value in Angular-Validation so
that the validation kicks in when this value is set to "false". This was
problem found with the 3rd party library nya-bootstrap-select
  • Loading branch information
ghiscoding committed Mar 31, 2017
1 parent cf135c2 commit 84607ca
Show file tree
Hide file tree
Showing 10 changed files with 56 additions and 21 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.5.17",
"version": "1.5.18",
"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.5.18 (2017-03-31) Fix disabled="false" as attribute to run validation.
1.5.17 (2017-03-10) Add silent mode to checkFormValidity function
1.5.16 (2017-01-24) Fix issue where empty Form Controller was throwing an error
1.5.15 (2017-01-19) Rename errorMessageVisible flag to isErrorMessageVisible.
Expand Down
10 changes: 5 additions & 5 deletions dist/angular-validation.min.js

Large diffs are not rendered by default.

6 changes: 2 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,14 @@ <h1>Angular-Validation Directive|Service (ghiscoding)</h1>
<script src="vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>

<!-- You can also load angular-validation with the all in 1 minified file -->
<script type="text/javascript" src="dist/angular-validation.min.js"></script>
<!--<script type="text/javascript" src="dist/angular-validation.min.js"></script>-->

<!-- angular-validation, directive and service are totally independent you can load one or the other or you can use them in parallel too. But `-common.js` and `-rules.js` are mandatory. -->
<!--
<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>
-->


<!-- your ng-app file -->
<script type="text/javascript" src="app.js"></script>
</div>
Expand Down
2 changes: 1 addition & 1 deletion more-examples/addon-3rdParty-withScope/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
<!-- 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>
<script src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/dist/angularjs-dropdown-multiselect.min.js"></script>

<!-- AngularJS Multi-Select -->
<script src="https://rawgit.com/isteven/angular-multi-select/master/isteven-multi-select.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion more-examples/addon-3rdParty/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ <h4><strong>ERRORS!</strong></h4>
<!-- 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>
<script src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/dist/angularjs-dropdown-multiselect.min.js"></script>

<!-- AngularJS Multi-Select -->
<script src="https://rawgit.com/isteven/angular-multi-select/master/isteven-multi-select.js"></script>
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.5.17",
"version": "1.5.18",
"author": "Ghislain B.",
"description": "Angular-Validation Directive and Service (ghiscoding)",
"main": "dist/angular-validation.min",
Expand Down
38 changes: 32 additions & 6 deletions src/validation-common.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,10 +153,10 @@ angular
// also save it inside controllerAs form (if found)
if (!!form && !!form.$name) {
var formName = form.$name.indexOf('.') >= 0 ? form.$name.split('.')[1] : form.$name;
var ctrlForm = (!!_globalOptions.controllerAs && !!_globalOptions.controllerAs[formName])
? _globalOptions.controllerAs[formName]
var ctrlForm = (!!_globalOptions.controllerAs && !!_globalOptions.controllerAs[formName])
? _globalOptions.controllerAs[formName]
: ((typeof self.elm.controller() !== "undefined") ? self.elm.controller()[formName] : null);

if(!!ctrlForm) {
ctrlForm.$validationSummary = arrayFindObjects(_validationSummary, 'formName', form.$name);
}
Expand Down Expand Up @@ -542,9 +542,22 @@ angular
validator = validatorAutoDetectType(validator, strValue);
}

// get the ngDisabled attribute if found
// get the disabled & ngDisabled attributes if found
var elmAttrDisabled = self.elm.prop("disabled");
var elmAttrNgDisabled = (!!self.attrs) ? self.attrs.ngDisabled : self.validatorAttrs.ngDisabled;

var isDisabled = (elmAttrDisabled === "")
? true
: (typeof elmAttrDisabled === "boolean")
? elmAttrDisabled
: (typeof elmAttrDisabled !== "undefined") ? self.scope.$eval(elmAttrDisabled) : false;

var isNgDisabled = (elmAttrNgDisabled === "")
? true
: (typeof elmAttrNgDisabled === "boolean")
? elmAttrNgDisabled
: (typeof elmAttrNgDisabled !== "undefined") ? self.scope.$eval(elmAttrNgDisabled) : false;

// now that we have a Validator type, we can now validate our value
// there is multiple type that can influence how the value will be validated
switch(validator.type) {
Expand All @@ -569,7 +582,7 @@ angular
}

// not required and not filled is always valid & 'disabled', 'ng-disabled' elements should always be valid
if ((!self.bFieldRequired && !strValue && !_validateOnEmpty) || (!!self.elm.prop("disabled") || !!self.scope.$eval(elmAttrNgDisabled))) {
if ((!self.bFieldRequired && !strValue && !_validateOnEmpty) || (isDisabled || isNgDisabled)) {
isConditionValid = true;
}

Expand Down Expand Up @@ -1404,9 +1417,22 @@ angular

// get the ngDisabled attribute if found
var elmAttrNgDisabled = (!!self.attrs) ? self.attrs.ngDisabled : self.validatorAttrs.ngDisabled;
var elmAttrDisabled = self.elm.prop("disabled");

var isDisabled = (elmAttrDisabled === "")
? true
: (typeof elmAttrDisabled === "boolean")
? elmAttrDisabled
: (typeof elmAttrDisabled !== "undefined") ? self.scope.$eval(elmAttrDisabled) : false;

var isNgDisabled = (elmAttrNgDisabled === "")
? true
: (typeof elmAttrNgDisabled === "boolean")
? elmAttrNgDisabled
: (typeof elmAttrNgDisabled !== "undefined") ? self.scope.$eval(elmAttrNgDisabled) : false;

// a 'disabled' element should always be valid, there is no need to validate it
if (!!self.elm.prop("disabled") || !!self.scope.$eval(elmAttrNgDisabled)) {
if (isDisabled || isNgDisabled) {
isValid = true;
} else {
// before running Regex test, we'll make sure that an input of type="number" doesn't hold invalid keyboard chars, if true skip Regex
Expand Down
7 changes: 6 additions & 1 deletion src/validation-directive.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,12 @@
// watch the `disabled` attribute for changes
// if it become disabled then skip validation else it becomes enable then we need to revalidate it
attrs.$observe("disabled", function(disabled) {
if (disabled) {
var isDisabled = (disabled === "")
? true
: (typeof disabled === "boolean") ? disabled
: (typeof disabled !== "undefined") ? scope.$eval(disabled) : false;

if (isDisabled === true) {
// Turn off validation when element is disabled & remove it from validation summary
cancelValidation();
commonObj.removeFromValidationSummary(_elmName);
Expand Down
7 changes: 6 additions & 1 deletion src/validation-service.js
Original file line number Diff line number Diff line change
Expand Up @@ -547,7 +547,12 @@ angular
// use a timeout so that the digest of removing the `disabled` attribute on the DOM is completed
// because commonObj.validate() checks for both the `disabled` and `ng-disabled` attribute so it basically fails without the $timeout because of the digest
$timeout(function() {
if (disabled) {
var isDisabled = (disabled === "")
? true
: (typeof disabled === "boolean") ? disabled
: (typeof disabled !== "undefined") ? scope.$eval(disabled) : false;

if (isDisabled) {
// Remove it from validation summary
attrs.ctrl.$setValidity('validation', true);
self.commonObj.updateErrorMsg('', { isValid: true, obj: formElmObj });
Expand Down

0 comments on commit 84607ca

Please sign in to comment.