Skip to content

Commit 8a86b03

Browse files
author
Huei Tan
committed
Merge pull request #70 from lvarayut/master
Add a MessageId atrribute for customizing valid/invalid message position
2 parents 744edde + a3841d9 commit 8a86b03

11 files changed

Lines changed: 225 additions & 91 deletions

‎Gruntfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,5 +95,6 @@ module.exports = function(grunt) {
9595
grunt.registerTask('dev', ['browserSync', 'watch']);
9696
grunt.registerTask('build', ['clean', 'concat', 'uglify']);
9797
grunt.registerTask('check', ['jshint', 'jsbeautifier', 'build']); // use this before commit
98+
grunt.registerTask('test', ['karma']);
9899

99100
};

‎config/karma.conf.angular.1.3.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,4 +75,4 @@ module.exports = function(config) {
7575
'karma-phantomjs-launcher'
7676
]
7777
});
78-
};
78+
};

‎dist/angular-validation-rule.js‎

100755100644
File mode changed.

‎dist/angular-validation-rule.min.js‎

100755100644
File mode changed.

‎dist/angular-validation.js‎

100755100644
Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,6 @@
153153
*/
154154
this.showErrorMessage = true;
155155

156-
157156
/**
158157
* Check form valid, return true
159158
* checkValid(Form): Check the specific form(Form) valid from angular `$valid`
@@ -277,7 +276,7 @@
277276

278277
});
279278
}).call(this);
280-
279+
281280
(function() {
282281
angular.module('validation.directive', ['validation.provider'])
283282
.directive('validator', ['$injector',
@@ -296,18 +295,23 @@
296295
* @param ctrl
297296
* @returns {}
298297
*/
299-
var validFunc = function(element, validMessage, validation, callback, ctrl) {
300-
var messageElem = element.next(),
298+
var validFunc = function(element, validMessage, validation, scope, ctrl) {
299+
var messageElem,
301300
messageToShow = validMessage || $validationProvider.getDefaultMsg(validation).success;
302301

302+
if (scope.messageId)
303+
messageElem = angular.element(document.querySelector('#' + scope.messageId));
304+
else
305+
messageElem = element.next();
306+
303307
if ($validationProvider.showSuccessMessage && messageToShow) {
304308
messageElem.html($validationProvider.getSuccessHTML(messageToShow));
305309
messageElem.css('display', '');
306310
} else {
307311
messageElem.css('display', 'none');
308312
}
309313
ctrl.$setValidity(ctrl.$name, true);
310-
if (callback) callback();
314+
if (scope.validCallback) scope.validCallback();
311315

312316
return true;
313317
};
@@ -322,18 +326,23 @@
322326
* @param ctrl
323327
* @returns {}
324328
*/
325-
var invalidFunc = function(element, validMessage, validation, callback, ctrl) {
326-
var messageElem = element.next(),
329+
var invalidFunc = function(element, validMessage, validation, scope, ctrl) {
330+
var messageElem,
327331
messageToShow = validMessage || $validationProvider.getDefaultMsg(validation).error;
328332

333+
if (scope.messageId)
334+
messageElem = angular.element(document.querySelector('#' + scope.messageId));
335+
else
336+
messageElem = element.next();
337+
329338
if ($validationProvider.showErrorMessage && messageToShow) {
330339
messageElem.html($validationProvider.getErrorHTML(messageToShow));
331340
messageElem.css('display', '');
332341
} else {
333342
messageElem.css('display', 'none');
334343
}
335344
ctrl.$setValidity(ctrl.$name, false);
336-
if (callback) callback();
345+
if (scope.inValidCallback) scope.inValidCallback();
337346

338347
return false;
339348
};
@@ -367,15 +376,15 @@
367376
expression = $validationProvider.getExpression(validator),
368377
valid = {
369378
success: function() {
370-
validFunc(element, attrs[successMessage], validator, scope.validCallback, ctrl);
379+
validFunc(element, attrs[successMessage], validator, scope, ctrl);
371380
if (leftValidation.length) {
372381
checkValidation(scope, element, attrs, ctrl, leftValidation, value);
373382
} else {
374383
return true;
375384
}
376385
},
377386
error: function() {
378-
return invalidFunc(element, attrs[errorMessage], validator, scope.invalidCallback, ctrl);
387+
return invalidFunc(element, attrs[errorMessage], validator, scope, ctrl);
379388
}
380389
};
381390

@@ -402,7 +411,11 @@
402411
}
403412
// Check with RegExp
404413
else if (expression.constructor === RegExp) {
405-
return $validationProvider.getExpression(validator).test(value) ? valid.success() : valid.error();
414+
// Only apply the test if the value is neither undefined or null
415+
if (value !== undefined && value !== null)
416+
return $validationProvider.getExpression(validator).test(value) ? valid.success() : valid.error();
417+
else
418+
return valid.error();
406419
} else {
407420
return valid.error();
408421
}
@@ -427,7 +440,8 @@
427440
model: '=ngModel',
428441
initialValidity: '=initialValidity',
429442
validCallback: '&',
430-
invalidCallback: '&'
443+
invalidCallback: '&',
444+
messageId: '@'
431445
},
432446
link: function(scope, element, attrs, ctrl) {
433447

@@ -454,10 +468,6 @@
454468
*/
455469
var uid = ctrl.validationId = guid();
456470

457-
/**
458-
* Valid/Invalid Message
459-
*/
460-
element.after('<span></span>');
461471

462472
/**
463473
* Set initial validity to undefined if no boolean value is transmitted
@@ -467,6 +477,12 @@
467477
initialValidity = scope.initialValidity;
468478
}
469479

480+
/**
481+
* Default Valid/Invalid Message
482+
*/
483+
if (!scope.messageId)
484+
element.after('<span></span>');
485+
470486
/**
471487
* Set custom initial validity
472488
* Usage: <input initial-validity="true" ... >
@@ -491,7 +507,10 @@
491507
ctrl.$setPristine();
492508
ctrl.$setValidity(ctrl.$name, undefined);
493509
ctrl.$render();
494-
element.next().html('');
510+
if (scope.messageId)
511+
angular.element(document.querySelector('#' + scope.messageId)).html('');
512+
else
513+
element.next().html('');
495514
});
496515

497516
/**
@@ -574,7 +593,10 @@
574593
ctrl.$setViewValue(ctrl.$viewValue);
575594
} else if (ctrl.$pristine) {
576595
// Don't validate form when the input is clean(pristine)
577-
element.next().html('');
596+
if (scope.messageId)
597+
angular.element(document.querySelector('#' + scope.messageId)).html('');
598+
else
599+
element.next().html('');
578600
return;
579601
}
580602
checkValidation(scope, element, attrs, ctrl, validation, value);
@@ -587,7 +609,11 @@
587609
* Don't showup the validation Message
588610
*/
589611
attrs.$observe('noValidationMessage', function(value) {
590-
var el = element.next();
612+
var el;
613+
if (scope.messageId)
614+
el = angular.element(document.querySelector('#' + scope.messageId));
615+
else
616+
el = element.next();
591617
if (value == 'true' || value === true) {
592618
el.css('display', 'none');
593619
} else if (value == 'false' || value === false) {

0 commit comments

Comments
 (0)