fix(validation): allow input to show many errors

require md-colors for style ref #245

src/colors/md-colors.html

@@ -165,6 +165,33 @@
     color: ${mdAccentColor}
   }
 
+  /* text input aurelia-validation messages */
+  .md-input-validation {
+    left: 0;
+    color:#f44336;
+    font-size:0.8rem;
+    transition: opacity .2s ease-out;
+    margin-top: -4px;
+    margin-bottom: 0;
+  }
+  @media only screen and (min-width: 0) {
+    .md-input-validation-first {
+      margin-top: -14px;
+      margin-bottom: -2px;
+    }
+  }
+  @media only screen and (min-width: 992px) {
+    .md-input-validation-first {
+      margin-top: -18px;
+      padding-bottom: 3px;
+    }
+  }
+  @media only screen and (min-width: 1200px) {
+    .md-input-validation-first {
+      margin-top: -19px;
+    }
+  }
+
   /* pagination */
   md-pagination .pagination li.active {
     background-color: ${mdPrimaryColor}

src/validation/validationRenderer.js

@@ -1,12 +1,14 @@
 export class MaterializeFormValidationRenderer {
 
+  className = 'md-input-validation';
+  classNameFirst = 'md-input-validation-first';
+
   render(instruction) {
     for (let { error, elements } of instruction.unrender) {
       for (let element of elements) {
         this.remove(element, error);
       }
     }
-
     for (let { error, elements } of instruction.render) {
       for (let element of elements) {
         this.add(element, error);
@@ -17,30 +19,28 @@ export class MaterializeFormValidationRenderer {
   add(element, error) {
     switch (element.tagName) {
     case 'MD-INPUT': {
-      let errorMessage = error.message || 'error';
       let input = element.querySelector('input');
+      let label = element.querySelector('label');
       if (input) {
         input.classList.remove('valid');
         input.classList.add('invalid');
-
-        // focus target
         error.target = input;
+      }
+      if (label) {
+        label.removeAttribute('data-error');
+      }
 
-        let label = element.querySelector('label');
-        if (label) {
-          label.classList.add('active');
-
-          // get error message from label
-          let msg = label.getAttribute('data-error');
-          if(!msg) {
-            // error message not set? add
-            label.setAttribute('data-error', errorMessage);
-          } else {
-            // set label message into error object
-            error.message = msg;
-          }
-        }
+      let message = document.createElement('div');
+      message.id = `md-input-validation-${error.id}`;
+      message.textContent = error.message;
+      message.className = this.className;
+      if (!element.querySelector('.' + this.className)) {
+        message.className += ' ' + this.classNameFirst;
       }
+      message.style.opacity = 0;
+      element.appendChild(message, element.nextSibling);
+      window.getComputedStyle(message).opacity;
+      message.style.opacity = 1;
       break;
     }
     default: break;
@@ -50,6 +50,11 @@ export class MaterializeFormValidationRenderer {
   remove(element, error) {
     switch (element.tagName) {
     case 'MD-INPUT': {
+      let message = element.querySelector(`#md-input-validation-${error.id}`);
+      if (message) {
+        element.removeChild(message);
+      }
+
       let input = element.querySelector('input');
       if (input) {
         input.classList.remove('invalid');