form validate css

2017-08-29 21:12:27 +02:00
parent c6badd6a90
commit 901b918dbb
2 changed files with 20 additions and 12 deletions
--- 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 {