validate input fields

src/components/my-form.vue

@@ -0,0 +1,86 @@
+<template>
+    <form @submit.prevent="submit()">
+        <div v-for="(e, i) in elements" :key="i">
+            <my-input :label="e.label" :type="e.type" v-model="formData[i]" @validate="validateData(i)"></my-input>
+            <span class="error" v-if="formErrors[i]">required</span>
+        </div>
+        <div>
+            <button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
+        </div>
+    </form>
+</template>
+
+<script>
+import MyInput from './my-input.vue';
+
+export default {
+    name: "MyForm",
+    components: {
+        MyInput
+    },
+    props: {
+        elements: {
+            type: Object,
+            default: () => {
+                return [];
+            }
+        },
+        buttons: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        },
+        submitHandler: {
+            type: Function,
+            default: () => {
+
+            }
+        }
+    },
+    data() {
+        return {
+            formData: {},
+            formErrors: {}
+        }
+    },
+    methods: {
+        validateData(name) {
+            if (this.elements[name].required) {
+                if (!this.formData[name]) {
+                    this.$set(this.formErrors, name, {
+                        error: 'required field'
+                    });
+
+                    return false;
+                } else {
+                    this.$delete(this.formErrors, name);
+                }
+            }
+            return true;
+        },
+        buttonClick(type) {
+            switch(type) {
+                case 'submit':
+                    this.submit();
+                    break;
+            }
+        },
+        submit() {
+            let valid = true;
+            Object.keys(this.elements).forEach(key => {
+                valid = (this.validateData(key) && valid);
+            });
+            if (valid) {
+                this.submitHandler(this.formData);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .error {
+        color: red;
+    }
+</style>