From 901b918dbba9ece9255ff6a947793bc8cb5ee427 Mon Sep 17 00:00:00 2001
From: Sebastian Frank <frank@basiskonfiguration.de>
Date: Tue, 29 Aug 2017 21:12:27 +0200
Subject: [PATCH] form validate css

---
 src/components/my-form.vue  | 13 ++++---------
 src/components/my-input.vue | 19 ++++++++++++++++---
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/my-form.vue b/src/components/my-form.vue
index cbaf8ef..7f7ba2a 100644
--- a/src/components/my-form.vue
+++ b/src/components/my-form.vue
@@ -8,9 +8,10 @@
                 :placeholder="item.placeholder"
                 :type="item.type"
                 v-model="formData[key]"
-                @validate="validateData(key)">
+                @validate="validateData(key)"
+                :invalid="formErrors[key]"
+            >
             </my-input>
-            <span class="error" v-if="formErrors[key]">required</span>
         </div>
         <div>
             <button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
@@ -85,10 +86,4 @@ export default {
         }
     }
 }
-</script>
-
-<style scoped>
-    .error {
-        color: red;
-    }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/my-input.vue b/src/components/my-input.vue
index edd385b..23a2b5c 100644
--- a/src/components/my-input.vue
+++ b/src/components/my-input.vue
@@ -9,16 +9,28 @@
             :name="name"
             :placeholder="placeholder"
             @blur="validate()"
-            @change="() => $emit('change', currentValue)">
+            @change="() => $emit('change', currentValue)"
+            :class="{invalid}"
+        >
         <input type="password" v-else-if="type == 'password'"
             v-model="currentValue"
             :name="name"
             :placeholder="placeholder"
             @blur="validate()"
-            @change="() => $emit('change', currentValue)">
+            @change="() => $emit('change', currentValue)"
+            :class="{invalid}"
+        >
     </div>
 </template>
 
+
+<style scoped>
+    .invalid {
+        background-color: #fcc;
+    }
+</style>
+
+
 <script>
 export default {
     name: "MyInput",
@@ -28,7 +40,8 @@ export default {
         'name',
         'placeholder',
         'type',
-        'value'
+        'value',
+        'invalid'
     ],
     data() {
         return {