Skip to content

Commit 5c05445

Browse files
author
Huei Tan
committed
Merge pull request #183 from hungdoan2/feature.setMessageElement
New Feature: custom Message Element & update parameter for setErrorHTML() & setSuccessHTML()
2 parents 69e74db + 932aea2 commit 5c05445

6 files changed

Lines changed: 280 additions & 23 deletions

File tree

‎API.md‎

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ You can also add a `validation-group` directive to group many elements into a gr
5252
```html
5353
<label>Validation group</label>
5454
<!-- Group both of these elements inside the contact group -->
55-
<input type="text" name="email" ng-model="email" validator="required" validation-group="contact">
55+
<input type="text" name="email" ng-model="email" validator="required" validation-group="contact">
5656
<input type="number" name="telephone" ng-model="telephone" validator="number" validation-group="contact">
5757
<!-- The message will be placed in side the span element -->
5858
<span id="contact"></span>
@@ -245,14 +245,14 @@ in `getDefaultMsg()`,and finally return the HTML code
245245
```javascript
246246
// your angular
247247
.config(['$validationProvider', function ($validationProvider) {
248-
$validationProvider.setErrorHTML(function (msg) {
248+
$validationProvider.setErrorHTML(function (msg, element, attrs) {
249249
// remember to return your HTML
250250
// eg: return '<p class="invalid">' + msg + '</p>';
251251
// or using filter
252252
// eg: return '<p class="invalid">{{"' + msg + '"| lowercase}}</p>';
253253
});
254254

255-
$validationProvider.setSuccessHTML(function (msg) {
255+
$validationProvider.setSuccessHTML(function (msg, element, attrs) {
256256
// eg: return '<p class="valid">' + msg + '</p>';
257257
// or using filter
258258
// eg: return '<p class="valid">{{"' + msg + '"| lowercase}}</p>';
@@ -286,7 +286,7 @@ The built in `maxlength` and `minlength` validators use parameters to configure
286286
<input type="text" name="username" ng-model="form.username" validator="maxlength=6"/>
287287
```
288288

289-
You can use parameters in your custom validators in the same way.
289+
You can use parameters in your custom validators in the same way.
290290
You can access this parameter in the validation expression like so:
291291

292292
```html
@@ -362,3 +362,48 @@ angular.module('yourApp', ['validation'])
362362
};
363363
}]);
364364
```
365+
366+
367+
### **Setup Message Element in config phase**
368+
`WHY`
369+
````html
370+
<div>
371+
<label>
372+
<input type="text" name="fullName" validator="required" />
373+
</label>
374+
<!-- I WANT MY MESSAGE ELEMENT HERE INSTEAD AFTER input -->
375+
</div>
376+
````
377+
378+
`HOW`
379+
380+
In this case, I can use `message-id` attribute as a "get a job done" solution.
381+
Because, If you choose this solution It will increase your effort of manually putting `message-id` and define your own Message Element.
382+
383+
You can use `addMsgElement` as a better solution to centralize & automate your configurations.
384+
385+
```javascript
386+
// your module
387+
angular.module('yourApp', ['validation'])
388+
.config(['$validationProvider', function ($validationProvider) {
389+
/**
390+
* Add your Msg Element
391+
* @param {DOMElement} element - Your input element
392+
* @return void
393+
*/
394+
$validationProvider.addMsgElement = function(element) {
395+
// Insert my own Msg Element
396+
$(element).parent().append('<span></span>');
397+
};
398+
399+
/**
400+
* Function to help validator get your Msg Element
401+
* @param {DOMElement} element - Your input element
402+
* @return {DOMElement}
403+
*/
404+
$validationProvider.getMsgElement = function(element) {
405+
return $(element).parent().children().last();
406+
};
407+
408+
}]);
409+
```

‎dist/angular-validation.js‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,28 @@
269269
}
270270
};
271271

272+
/**
273+
* Add Message Element in config phase
274+
* When you need custom your messageElement
275+
* NODE: this funtion & and `message-id` attribute, have similar purpose.
276+
* This function will help you add your `messageElement` automatically instead of pre-defined.
277+
* @param element
278+
*/
279+
this.addMsgElement = function(element) {
280+
return element.after('<span></span>');
281+
};
282+
283+
/**
284+
* Add Message Element in config phase
285+
* When you need custom your messageElement
286+
* NODE: this funtion & and `message-id` attribute, have similar purpose.
287+
* This function will help you add your `messageElement` automatically instead of pre-defined.
288+
* @param element
289+
*/
290+
this.getMsgElement = function(element) {
291+
return element.next();
292+
};
293+
272294
/**
273295
* $get
274296
* @returns {{setErrorHTML: *, getErrorHTML: Function, setSuccessHTML: *, getSuccessHTML: Function, setExpression: *, getExpression: Function, setDefaultMsg: *, getDefaultMsg: Function, checkValid: Function, validate: Function, reset: Function}}
@@ -293,7 +315,9 @@
293315
validCallback: this.validCallback,
294316
invalidCallback: this.invalidCallback,
295317
resetCallback: this.resetCallback,
296-
reset: this.reset
318+
reset: this.reset,
319+
addMsgElement: this.addMsgElement,
320+
getMsgElement: this.getMsgElement
297321
};
298322
}];
299323
}
@@ -383,12 +407,12 @@
383407
var messageElem;
384408

385409
if (messageId || validationGroup) messageElem = angular.element(document.querySelector('#' + (messageId || validationGroup)));
386-
else messageElem = element.next();
410+
else messageElem = $validationProvider.getMsgElement(element);
387411

388412
if (element.attr('no-validation-message')) {
389413
messageElem.css('display', 'none');
390414
} else if ($validationProvider.showSuccessMessage && messageToShow) {
391-
messageElem.html('').append($compile($validationProvider.getSuccessHTML(messageToShow))(scope));
415+
messageElem.html('').append($compile($validationProvider.getSuccessHTML(messageToShow, element, attrs))(scope));
392416
messageElem.css('display', '');
393417
} else {
394418
messageElem.css('display', 'none');
@@ -421,12 +445,12 @@
421445
var messageElem;
422446

423447
if (messageId || validationGroup) messageElem = angular.element(document.querySelector('#' + (messageId || validationGroup)));
424-
else messageElem = element.next();
448+
else messageElem = $validationProvider.getMsgElement(element);
425449

426450
if (element.attr('no-validation-message')) {
427451
messageElem.css('display', 'none');
428452
} else if ($validationProvider.showErrorMessage && messageToShow) {
429-
messageElem.html('').append($compile($validationProvider.getErrorHTML(messageToShow))(scope));
453+
messageElem.html('').append($compile($validationProvider.getErrorHTML(messageToShow, element, attrs))(scope));
430454
messageElem.css('display', '');
431455
} else {
432456
messageElem.css('display', 'none');
@@ -603,7 +627,7 @@
603627
/**
604628
* Default Valid/Invalid Message
605629
*/
606-
if (!(messageId || validationGroup)) element.after('<span></span>');
630+
if (!(messageId || validationGroup)) $validationProvider.addMsgElement(element);
607631

608632
/**
609633
* Set custom initial validity
@@ -629,7 +653,7 @@
629653
ctrl.$setValidity(ctrl.$name, undefined);
630654
ctrl.$render();
631655
if (messageId || validationGroup) angular.element(document.querySelector('#' + (messageId || validationGroup))).html('');
632-
else element.next().html('');
656+
else $validationProvider.getMsgElement(element).html('');
633657

634658
if ($validationProvider.resetCallback) $validationProvider.resetCallback(element);
635659
});
@@ -724,7 +748,7 @@
724748
} else if (ctrl.$pristine) {
725749
// Don't validate form when the input is clean(pristine)
726750
if (messageId || validationGroup) angular.element(document.querySelector('#' + (messageId || validationGroup))).html('');
727-
else element.next().html('');
751+
else $validationProvider.getMsgElement(element).html('');
728752
return;
729753
}
730754
checkValidation(scope, element, attrs, ctrl, validation, value);
@@ -737,7 +761,7 @@
737761
attrs.$observe('noValidationMessage', function(value) {
738762
var el;
739763
if (messageId || validationGroup) el = angular.element(document.querySelector('#' + (messageId || validationGroup)));
740-
else el = element.next();
764+
else el = $validationProvider.getMsgElement(element);
741765
if (value === 'true' || value === true) el.css('display', 'none');
742766
else if (value === 'false' || value === false) el.css('display', 'block');
743767
});

0 commit comments

Comments
 (0)