Skip to content

Commit

Permalink
Merge pull request #183 from hungdoan2/feature.setMessageElement
Browse files Browse the repository at this point in the history 
New Feature: custom Message Element & update parameter for setErrorHTML() & setSuccessHTML()
  • Loading branch information
Huei Tan committed Jan 11, 2016
2 parents 69e74db + 932aea2 commit 5c05445
Show file tree
Hide file tree
Showing 6 changed files with 280 additions and 23 deletions.
53 changes: 49 additions & 4 deletions API.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ You can also add a `validation-group` directive to group many elements into a gr
```html
<label>Validation group</label>
<!-- Group both of these elements inside the contact group -->
<input type="text" name="email" ng-model="email" validator="required" validation-group="contact">
<input type="text" name="email" ng-model="email" validator="required" validation-group="contact">
<input type="number" name="telephone" ng-model="telephone" validator="number" validation-group="contact">
<!-- The message will be placed in side the span element -->
<span id="contact"></span>
Expand Down Expand Up @@ -245,14 +245,14 @@ in `getDefaultMsg()`,and finally return the HTML code
```javascript
// your angular
.config(['$validationProvider', function ($validationProvider) {
$validationProvider.setErrorHTML(function (msg) {
$validationProvider.setErrorHTML(function (msg, element, attrs) {
// remember to return your HTML
// eg: return '<p class="invalid">' + msg + '</p>';
// or using filter
// eg: return '<p class="invalid">{{"' + msg + '"| lowercase}}</p>';
});

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

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

```html
Expand Down Expand Up @@ -362,3 +362,48 @@ angular.module('yourApp', ['validation'])
};
}]);
```


### **Setup Message Element in config phase**
`WHY`
````html
<div>
<label>
<input type="text" name="fullName" validator="required" />
</label>
<!-- I WANT MY MESSAGE ELEMENT HERE INSTEAD AFTER input -->
</div>
````

`HOW`

In this case, I can use `message-id` attribute as a "get a job done" solution.
Because, If you choose this solution It will increase your effort of manually putting `message-id` and define your own Message Element.

You can use `addMsgElement` as a better solution to centralize & automate your configurations.

```javascript
// your module
angular.module('yourApp', ['validation'])
.config(['$validationProvider', function ($validationProvider) {
/**
* Add your Msg Element
* @param {DOMElement} element - Your input element
* @return void
*/
$validationProvider.addMsgElement = function(element) {
// Insert my own Msg Element
$(element).parent().append('<span></span>');
};

/**
* Function to help validator get your Msg Element
* @param {DOMElement} element - Your input element
* @return {DOMElement}
*/
$validationProvider.getMsgElement = function(element) {
return $(element).parent().children().last();
};

}]);
```
42 changes: 33 additions & 9 deletions dist/angular-validation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,28 @@
}
};

/**
* Add Message Element in config phase
* When you need custom your messageElement
* NODE: this funtion & and `message-id` attribute, have similar purpose.
* This function will help you add your `messageElement` automatically instead of pre-defined.
* @param element
*/
this.addMsgElement = function(element) {
return element.after('<span></span>');
};

/**
* Add Message Element in config phase
* When you need custom your messageElement
* NODE: this funtion & and `message-id` attribute, have similar purpose.
* This function will help you add your `messageElement` automatically instead of pre-defined.
* @param element
*/
this.getMsgElement = function(element) {
return element.next();
};

/**
* $get
* @returns {{setErrorHTML: *, getErrorHTML: Function, setSuccessHTML: *, getSuccessHTML: Function, setExpression: *, getExpression: Function, setDefaultMsg: *, getDefaultMsg: Function, checkValid: Function, validate: Function, reset: Function}}
Expand All @@ -293,7 +315,9 @@
validCallback: this.validCallback,
invalidCallback: this.invalidCallback,
resetCallback: this.resetCallback,
reset: this.reset
reset: this.reset,
addMsgElement: this.addMsgElement,
getMsgElement: this.getMsgElement
};
}];
}
Expand Down Expand Up @@ -383,12 +407,12 @@
var messageElem;

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

if (element.attr('no-validation-message')) {
messageElem.css('display', 'none');
} else if ($validationProvider.showSuccessMessage && messageToShow) {
messageElem.html('').append($compile($validationProvider.getSuccessHTML(messageToShow))(scope));
messageElem.html('').append($compile($validationProvider.getSuccessHTML(messageToShow, element, attrs))(scope));
messageElem.css('display', '');
} else {
messageElem.css('display', 'none');
Expand Down Expand Up @@ -421,12 +445,12 @@
var messageElem;

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

if (element.attr('no-validation-message')) {
messageElem.css('display', 'none');
} else if ($validationProvider.showErrorMessage && messageToShow) {
messageElem.html('').append($compile($validationProvider.getErrorHTML(messageToShow))(scope));
messageElem.html('').append($compile($validationProvider.getErrorHTML(messageToShow, element, attrs))(scope));
messageElem.css('display', '');
} else {
messageElem.css('display', 'none');
Expand Down Expand Up @@ -603,7 +627,7 @@
/**
* Default Valid/Invalid Message
*/
if (!(messageId || validationGroup)) element.after('<span></span>');
if (!(messageId || validationGroup)) $validationProvider.addMsgElement(element);

/**
* Set custom initial validity
Expand All @@ -629,7 +653,7 @@
ctrl.$setValidity(ctrl.$name, undefined);
ctrl.$render();
if (messageId || validationGroup) angular.element(document.querySelector('#' + (messageId || validationGroup))).html('');
else element.next().html('');
else $validationProvider.getMsgElement(element).html('');

if ($validationProvider.resetCallback) $validationProvider.resetCallback(element);
});
Expand Down Expand Up @@ -724,7 +748,7 @@
} else if (ctrl.$pristine) {
// Don't validate form when the input is clean(pristine)
if (messageId || validationGroup) angular.element(document.querySelector('#' + (messageId || validationGroup))).html('');
else element.next().html('');
else $validationProvider.getMsgElement(element).html('');
return;
}
checkValidation(scope, element, attrs, ctrl, validation, value);
Expand All @@ -737,7 +761,7 @@
attrs.$observe('noValidationMessage', function(value) {
var el;
if (messageId || validationGroup) el = angular.element(document.querySelector('#' + (messageId || validationGroup)));
else el = element.next();
else el = $validationProvider.getMsgElement(element);
if (value === 'true' || value === true) el.css('display', 'none');
else if (value === 'false' || value === false) el.css('display', 'block');
});
Expand Down
Loading

0 comments on commit 5c05445

Please sign in to comment.