Merge pull request #246 from Ullfis/aurelia-validation

Aurelia validation
aurelia-ui-toolkits · Sep 1, 2016 · beb322c · beb322c
2 parents a60b7c1 + 9de8f2d
commit beb322c
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 26 deletions.
diff --git a/sample/src/samples/input/aurelia-validation.html b/sample/src/samples/input/aurelia-validation.html
@@ -2,17 +2,23 @@
   <div>
     <md-input
       md-label="First Name"
-      md-value.bind="firstName & validate:rules"
-      md-validate="true"
-      md-validate-error="First Name custom error message">
+      md-value.bind="firstName & validate:rules">
     </md-input>
 
     <md-input
       md-label="Last Name"
       md-placeholder="Last Name"
+      md-validate="true"
       md-validate-success="good"
       md-value.bind="lastName & validate:rules">
     </md-input>
+
+    <md-input
+      md-label="Email"
+      md-validate="true"
+      md-validate-success="yes!!"
+      md-value.bind="email & validate:rules">
+    </md-input>
   </div>
 
   <div style="margin-top: 15px;">

diff --git a/sample/src/samples/input/aurelia-validation.js b/sample/src/samples/input/aurelia-validation.js
@@ -1,24 +1,30 @@
 import { inject, NewInstance } from 'aurelia-framework';
-import { ValidationController, validateTrigger, ValidationRules } from 'aurelia-validation';
-import { MaterializeFormValidationRenderer } from 'aurelia-materialize-bridge/validation/validationRenderer';
+import { ValidationController, ValidationRules } from 'aurelia-validation';
+import { MaterializeFormValidationRenderer } from 'aurelia-materialize-bridge';
 
 @inject(NewInstance.of(ValidationController))
 export class AureliaValidation {
   message = '';
   firstName = '';
   lastName = 'Doe';
+  email = '';
 
   controller = null;
 
   rules = ValidationRules
-    .ensure('firstName').required()
-    .ensure('lastName').minLength(4)
+    .ensure('firstName')
+      .required()
+    .ensure('lastName')
+      .minLength(4)
+    .ensure('email')
+      .required()
+        .withMessage('We need your email')
+      .email()
     .rules;
 
   constructor(controller: ValidationController) {
     this.controller = controller;
     this.controller.addRenderer(new MaterializeFormValidationRenderer());
-    this.controller.validateTrigger = validateTrigger.change;
   }
 
   validateModel() {

diff --git a/sample/src/samples/input/aurelia-validation.md b/sample/src/samples/input/aurelia-validation.md
@@ -11,3 +11,7 @@ export function configure(aurelia) {
     .plugin('aurelia-validation');
 }
 ```
+
+##### md dependencies
+
+* md-colors
diff --git a/src/colors/md-colors.html b/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}

diff --git a/src/validation/validationRenderer.js b/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');