Skip to content
This repository was archived by the owner on Aug 15, 2021. It is now read-only.

Commit db004fb

Browse files
jonsamwelljonsamwell
committed
Fixes issue (#88) where the node is a comment.Fixes issue with validation error message placement with checkboxes and radio groups for the BS3 modifier.
1 parent efba8b3 commit db004fb

10 files changed

+275
-16
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-auto-validate",
3-
"version": "1.18.15",
3+
"version": "1.18.16",
44
"description": "An automatic validation module for AngularJS which gets rid of excess html in favour of dynamic element modification to notify the user of validation errors",
55
"main": "dist/jcs-auto-validate.js",
66
"keywords": [

‎dist/changelog.txt

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
v1.18.16 03/09/2015
2+
Fixes issue (https://github.com/jonsamwell/angular-auto-validate/issues/88) where the node is a comment.
3+
Fixes issue with validation error message placement with checkboxes and radio groups for the BS3 modifier.
4+
15
V1.18.15 01/09/2015
26
Added nl-nl (Dutch) language file thanks to <Jonathan voor de Poorte>
37
Added zh-cn (simplified chinese) language file thanks to <https://github.com/bwlee>

‎dist/jcs-auto-validate.js

+18-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* angular-auto-validate - v1.18.15 - 2015-09-01
2+
* angular-auto-validate - v1.18.16 - 2015-09-04
33
* https://github.com/jonsamwell/angular-auto-validate
44
* Copyright (c) 2015 Jon Samwell (http://www.jonsamwell.com)
55
*/
@@ -427,21 +427,32 @@ function Bootstrap3ElementModifierFn($log) {
427427
reset(frmGroupEl);
428428
inputGroupEl = findInputGroupElement(frmGroupEl[0]);
429429
frmGroupEl.addClass('has-error ' + (inputGroupEl.length > 0 ? '' : 'has-feedback'));
430-
insertAfter(inputGroupEl.length > 0 ? inputGroupEl : el, helpTextEl);
430+
insertAfter(inputGroupEl.length > 0 ? inputGroupEl : getCorrectElementToPlaceErrorElementAfter(el), helpTextEl);
431431
if (addValidationStateIcons) {
432432
var iconElText = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
433433
if (inputGroupEl.length > 0) {
434434
iconElText = iconElText.replace('form-', '');
435435
iconElText = '<span class="input-group-addon control-feedback">' + iconElText + '</span';
436436
}
437437

438-
insertAfter(el, angular.element(iconElText));
438+
insertAfter(getCorrectElementToPlaceErrorElementAfter(el), angular.element(iconElText));
439439
}
440440
} else {
441441
$log.error('Angular-auto-validate: invalid bs3 form structure elements must be wrapped by a form-group class');
442442
}
443443
},
444444

445+
getCorrectElementToPlaceErrorElementAfter = function (el) {
446+
var correctEl = el,
447+
elType = el[0].type ? el[0].type.toLowerCase() : '';
448+
449+
if ((elType === 'checkbox' || elType === 'radio') && el.parent()[0].nodeName.toLowerCase() === 'label') {
450+
correctEl = el.parent();
451+
}
452+
453+
return correctEl;
454+
},
455+
445456
/**
446457
* @ngdoc function
447458
* @name bootstrap3ElementModifier#makeDefault
@@ -828,7 +839,7 @@ function ValidationManagerFn(validator, elementUtils) {
828839
},
829840

830841
/**
831-
* Only validate if the element is present, it is visible
842+
* Only validate if the element is present, it is visible, if it is not a comment,
832843
* it is either a valid user input control (input, select, textare, form) or
833844
* it is a custom control register by the developer.
834845
* @param el
@@ -837,19 +848,20 @@ function ValidationManagerFn(validator, elementUtils) {
837848
*/
838849
shouldValidateElement = function (el, formOptions, formSubmitted) {
839850
var elementExists = el && el.length > 0,
851+
isElementAComment = elementExists && el[0].nodeName.toLowerCase() === '#comment',
840852
correctVisibilityToValidate,
841853
correctTypeToValidate,
842854
correctPhaseToValidate;
843855

844-
if (elementExists) {
856+
if (elementExists && isElementAComment === false) {
845857
correctVisibilityToValidate = elementIsVisible(el) || formOptions.validateNonVisibleControls;
846858
correctTypeToValidate = elementTypesToValidate.indexOf(el[0].nodeName.toLowerCase()) > -1 ||
847859
el[0].hasAttribute('register-custom-form-control');
848860
correctPhaseToValidate = formOptions.validateOnFormSubmit === false ||
849861
(formOptions.validateOnFormSubmit === true && formSubmitted === true);
850862
}
851863

852-
return elementExists && correctVisibilityToValidate && correctTypeToValidate && correctPhaseToValidate;
864+
return elementExists && !isElementAComment && correctVisibilityToValidate && correctTypeToValidate && correctPhaseToValidate;
853865

854866
},
855867

‎dist/jcs-auto-validate.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-auto-validate",
3-
"version": "1.18.15",
3+
"version": "1.18.16",
44
"description": "An automatic validation module for AngularJS which gets rid of excess html in favour of dynamic element modification to notify the user of validation errors",
55
"main": "angular-auto-validate.min.js",
66
"scripts": {

‎src/services/bootstrap3ElementModifier.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -131,21 +131,32 @@ function Bootstrap3ElementModifierFn($log) {
131131
reset(frmGroupEl);
132132
inputGroupEl = findInputGroupElement(frmGroupEl[0]);
133133
frmGroupEl.addClass('has-error ' + (inputGroupEl.length > 0 ? '' : 'has-feedback'));
134-
insertAfter(inputGroupEl.length > 0 ? inputGroupEl : el, helpTextEl);
134+
insertAfter(inputGroupEl.length > 0 ? inputGroupEl : getCorrectElementToPlaceErrorElementAfter(el), helpTextEl);
135135
if (addValidationStateIcons) {
136136
var iconElText = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
137137
if (inputGroupEl.length > 0) {
138138
iconElText = iconElText.replace('form-', '');
139139
iconElText = '<span class="input-group-addon control-feedback">' + iconElText + '</span';
140140
}
141141

142-
insertAfter(el, angular.element(iconElText));
142+
insertAfter(getCorrectElementToPlaceErrorElementAfter(el), angular.element(iconElText));
143143
}
144144
} else {
145145
$log.error('Angular-auto-validate: invalid bs3 form structure elements must be wrapped by a form-group class');
146146
}
147147
},
148148

149+
getCorrectElementToPlaceErrorElementAfter = function (el) {
150+
var correctEl = el,
151+
elType = el[0].type ? el[0].type.toLowerCase() : '';
152+
153+
if ((elType === 'checkbox' || elType === 'radio') && el.parent()[0].nodeName.toLowerCase() === 'label') {
154+
correctEl = el.parent();
155+
}
156+
157+
return correctEl;
158+
},
159+
149160
/**
150161
* @ngdoc function
151162
* @name bootstrap3ElementModifier#makeDefault

‎src/services/validationManager.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function ValidationManagerFn(validator, elementUtils) {
2929
},
3030

3131
/**
32-
* Only validate if the element is present, it is visible
32+
* Only validate if the element is present, it is visible, if it is not a comment,
3333
* it is either a valid user input control (input, select, textare, form) or
3434
* it is a custom control register by the developer.
3535
* @param el
@@ -38,19 +38,20 @@ function ValidationManagerFn(validator, elementUtils) {
3838
*/
3939
shouldValidateElement = function (el, formOptions, formSubmitted) {
4040
var elementExists = el && el.length > 0,
41+
isElementAComment = elementExists && el[0].nodeName.toLowerCase() === '#comment',
4142
correctVisibilityToValidate,
4243
correctTypeToValidate,
4344
correctPhaseToValidate;
4445

45-
if (elementExists) {
46+
if (elementExists && isElementAComment === false) {
4647
correctVisibilityToValidate = elementIsVisible(el) || formOptions.validateNonVisibleControls;
4748
correctTypeToValidate = elementTypesToValidate.indexOf(el[0].nodeName.toLowerCase()) > -1 ||
4849
el[0].hasAttribute('register-custom-form-control');
4950
correctPhaseToValidate = formOptions.validateOnFormSubmit === false ||
5051
(formOptions.validateOnFormSubmit === true && formSubmitted === true);
5152
}
5253

53-
return elementExists && correctVisibilityToValidate && correctTypeToValidate && correctPhaseToValidate;
54+
return elementExists && !isElementAComment && correctVisibilityToValidate && correctTypeToValidate && correctPhaseToValidate;
5455

5556
},
5657

‎tests/services/bootstrap3ElementModifier.spec.js

+12
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,18 @@
7474

7575
expect(element.find('.help-block').length).to.equal(1);
7676
});
77+
78+
it('should handle checkbox with a label correctly', function () {
79+
var element = angular.element('<div class="form-group"><label>' +
80+
'<input id="el5" type="checkbox" class="form-control" required="required" ng-model="model.hasEmail">Label Value</label></div>');
81+
82+
bootstrap3ElementModifier.makeInvalid(element.find('#el5'));
83+
$rootScope.$apply();
84+
85+
expect(element[0].outerHTML).to.equal('<div class="form-group has-error has-feedback"><label>' +
86+
'<input id="el5" type="checkbox" class="form-control" required="required" ng-model="model.hasEmail">Label Value</label>' +
87+
'<span class="help-block has-error error-msg">undefined</span></div>');
88+
});
7789
});
7890

7991
describe('makeValid', function () {

‎tests/testPage.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<form role="form" name="testFrm" novalidate="novalidate"
1616
ng-submit="submit(testFrm);"
1717
validate-non-visible-controls="false"
18-
validate-on-form-submit="false"
18+
validate-on-form-submit="true"
1919
disable-dynamic-validatio_n>
2020
<button type="button" class="btn btn-primary" ng-click="setExternalError(testFrm);">Set External Error On Firstname</button>
2121
<div class="form-group">

0 commit comments

Comments
 (0)