add function: .addMsgElement & .setMsgElement

hueitan · Jan 5, 2016 · bd0d85c · bd0d85c
1 parent 6658730
commit bd0d85c
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 21 deletions.
diff --git a/API.md b/API.md
@@ -245,12 +245,12 @@ 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>';
     });
 
-    $validationProvider.setSuccessHTML(function (msg) {
+    $validationProvider.setSuccessHTML(function (msg, element, attrs) {
         // eg: return '<p class="valid">' + msg + '</p>';
     });
 }]);
@@ -360,3 +360,41 @@ 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();
+        };
+
+    }]);
+```
diff --git a/dist/angular-validation.js b/dist/angular-validation.js
@@ -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}}
@@ -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
       };
     }];
   }
@@ -382,12 +406,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($validationProvider.getSuccessHTML(messageToShow));
+        messageElem.html($validationProvider.getSuccessHTML(messageToShow, element, attrs));
         messageElem.css('display', '');
       } else {
         messageElem.css('display', 'none');
@@ -420,12 +444,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($validationProvider.getErrorHTML(messageToShow));
+        messageElem.html($validationProvider.getErrorHTML(messageToShow, element, attrs));
         messageElem.css('display', '');
       } else {
         messageElem.css('display', 'none');
@@ -602,7 +626,7 @@
         /**
          * Default Valid/Invalid Message
          */
-        if (!(messageId || validationGroup)) element.after('<span></span>');
+        if (!(messageId || validationGroup)) $validationProvider.addMsgElement(element);
 
         /**
          * Set custom initial validity
@@ -628,7 +652,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);
           });
@@ -723,7 +747,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);
@@ -736,7 +760,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');
           });