Skip to content

Commit

Permalink
New Feature: custom Message Element & update parameter for setErrorHT…
Browse files Browse the repository at this point in the history 
…ML()& setSuccessHTML()
  • Loading branch information
@hung-doan
hung-doan committed Jan 5, 2016
1 parent 5b3c761 commit f39dd5f
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 23 deletions.
48 changes: 44 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,43 @@ 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`

```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($validationProvider.getSuccessHTML(messageToShow, element, attrs));
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($validationProvider.getErrorHTML(messageToShow, element, attrs));
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 f39dd5f

Please sign in to comment.