Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Feature: custom Message Element & update parameter for setErrorHTML() & setSuccessHTML() #183

Merged
merged 1 commit into from
Jan 11, 2016
Merged

New Feature: custom Message Element & update parameter for setErrorHTML() & setSuccessHTML() #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 49 additions & 4 deletions API.md
View file
Open in desktop
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**
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you explain more in plain English? For example, "You could use this addMsgElement to ... It reduces your effort of manually putting `message-id" so on and so forth.

`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();
};

}]);
```
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mind giving more description about add/getMsgElement ?

This is difficult to understand,

  1. Show the default message element
  2. Show the example why we use addMsgElement

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I would like to add a line

Please make sure that you understand the usage before using add/getMsgElement

42 changes: 33 additions & 9 deletions dist/angular-validation.js
View file
Open in desktop
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>');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I would like to use set instead of add, as you can see other providers function name, they are all set and get to name it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my opinion set vs add is absolutely different.
set : set value to an existence item/property
add: add a not-existence item
Because Msg Element hadn't existed before I added it => So I use add instead of set.
But set can be right at some point.

So, I think It's better to merge addMsgElement and setMsgElement into one setMsgElement

In setMsgElement we do add and return the DOM object of MsgElement. And your directive will get Msg element from returned value from setMsgElement.

Example:

        $validationProvider.addMsgElement = function(element) {
            $(element).parent().append('<span></span>');
        };
        $validationProvider.getMsgElement = function(element) {
          return $(element).parent().children().last();
        };

will be replaced by

        $validationProvider.setMsgElement = function(element) {
          $(element).parent().append('<span></span>');
          return $(element).parent().children().last();
        };

If you agree with this implement I will update my code.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I get your point, using add is more understandable in this state - adding a non-existing item.
Then let's stick on the original one add 👍

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I agree with @huei90 at the beginning. The name itself doesn't explain what the function does, at least for me. I would prefer set over add. We don't add anything to the page, however, we set the default place where messages will go. The function might be named as setDefaultMsgElement or somethings alike.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I need to refresh everything.
The reason why I'm choosing set for the previous provider is that they allow user to set something - set the html set the ouput message.

In this addMsgElement, this is correct when used inside directive, because we are adding something not set. Set is the method that allow people to set, using add to do the set thing in config phase is not that correct (ideally)

@lvarayut @hungdoan2 Let's figure out a better way to use set or add

};

/**
* 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