feat(validation): add error list to md-select

aurelia-ui-toolkits · Sep 2, 2016 · 4ccb4a9 · 4ccb4a9
1 parent ddacfbd
commit 4ccb4a9
Showing 1 changed file with 51 additions and 16 deletions.
diff --git a/src/validation/validationRenderer.js b/src/validation/validationRenderer.js
@@ -29,18 +29,21 @@ export class MaterializeFormValidationRenderer {
       if (label) {
         label.removeAttribute('data-error');
       }
-
-      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;
+      this.addMessage(element, error);
+      break;
+    }
+    case 'SELECT': {
+      const selectWrapper = element.closest('.select-wrapper');
+      if (!selectWrapper) {
+        return;
+      }
+      let input = selectWrapper.querySelector('input');
+      if (input) {
+        input.classList.remove('valid');
+        input.classList.add('invalid');
+        error.target = input;
       }
-      message.style.opacity = 0;
-      element.appendChild(message, element.nextSibling);
-      window.getComputedStyle(message).opacity;
-      message.style.opacity = 1;
+      this.addMessage(selectWrapper, error);
       break;
     }
     default: break;
@@ -50,13 +53,24 @@ 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);
-      }
+      this.removeMessage(element, error);
 
       let input = element.querySelector('input');
-      if (input) {
+      if (input && element.querySelectorAll('.' + this.className).length === 0) {
+        input.classList.remove('invalid');
+        input.classList.add('valid');
+      }
+      break;
+    }
+    case 'SELECT': {
+      const selectWrapper = element.closest('.select-wrapper');
+      if (!selectWrapper) {
+        return;
+      }
+      this.removeMessage(selectWrapper, error);
+
+      let input = selectWrapper.querySelector('input');
+      if (input && selectWrapper.querySelectorAll('.' + this.className).length === 0) {
         input.classList.remove('invalid');
         input.classList.add('valid');
       }
@@ -66,4 +80,25 @@ export class MaterializeFormValidationRenderer {
     }
   }
 
+  addMessage(element, error) {
+    let message = document.createElement('div');
+    message.id = `md-input-validation-${error.id}`;
+    message.textContent = error.message;
+    message.className = this.className;
+    if (element.querySelectorAll('.' + this.className).length === 0) {
+      message.className += ' ' + this.classNameFirst;
+    }
+    message.style.opacity = 0;
+    element.appendChild(message, element.nextSibling);
+    window.getComputedStyle(message).opacity;
+    message.style.opacity = 1;
+  }
+
+  removeMessage(element, error) {
+    let message = element.querySelector(`#md-input-validation-${error.id}`);
+    if (message) {
+      element.removeChild(message);
+    }
+  }
+
 }