validate child component

[Costas]

within form

child component

<template>
  <v-text-field
    :value="value"
    :rules="[() => !!value || 'This field is required']"
    @input="$emit('update:value', $event)"
  ></v-text-field>
</template>


<script>
export default {
  name: "myinput",
  props: {
    value: String,
  },
};
</script>

parent component with v-form

<template>
  <div class="hello">
 
    {{ msg }}

    {{ valueChild }}

    <v-form
      ref="form"
      v-model="valid"
      lazy-validation
      @submit.prevent="myMethod"
    >
      <myinput
        style="width: 500px"
        :value.sync="valueChild"
      ></myinput>

      <v-text-field
        ref="physical"
        v-model="value2"
        :rules="[() => !!value2 || 'This field is required']"
        placeholder="add multiple lines"
      ></v-text-field>

      <button>Validate</button>
    </v-form>
  </div>
</template>

<script>
import myinput from "./myinput.vue";

export default {
  name: "HelloWorld",
  components: { myinput },
  data() {
    return {
      valueChild: "",
      value2: "",
      valid: false,
    };
  },
  props: {
    msg: String,
  },
  methods: {
    myMethod() {
      this.msg = "Hello Vue in CodeSandbox!";

      if (!this.$refs.form.validate()) {
        alert("Fields required!");
        return;
      }
      this.msg = " Submitted success!";
    },
  },
};
</script>

without form

child component

<template>
  <v-text-field
    ref="test"
    :value="value"
    :rules="[() => !!value || 'This field is required']"
    @input="$emit('update:value', $event)"
  ></v-text-field>
</template>


<script>
export default {
  name: "WithoutFormmyInput",
  props: {
    value: String,
  },
  methods: {
    valid() {
      return this.$refs["test"].validate();
    },
  },
};
</script>

parent component

<template>
  <div class="hello">
 
{{ msg }}

{{ valueChild }}

    <WithoutFormmyInput
      ref="itemChild"
      style="width: 500px"
      :value.sync="valueChild"
    ></WithoutFormmyInput>

    <v-text-field
      ref="physical"
      v-model="value2"
      :rules="[() => !!value2 || 'This field is required']"
      placeholder="add multiple lines"
    ></v-text-field>

    <button @click="myMethod">Validate</button>
  </div>
</template>

<script>
import WithoutFormmyInput from "./WithoutFormmyInput.vue";

export default {
  name: "HelloWorld",
  components: { WithoutFormmyInput },
  data() {
    return {
      valueChild: "",
      value2: "",
    };
  },
  props: {
    msg: String,
  },
  computed: {
    form() {
      return {
        physical: "dummy",
        // itemChild: "dummy",
      };
    },
  },
  methods: {
    myMethod() {
      this.msg = "Hello Vue in CodeSandbox!";

      if (!this.$refs["itemChild"].valid()) {
        alert("Child text required");
        return;
      }

      let isInvalid;
      Object.keys(this.form).forEach((f) => {
        if (!this.$refs[f].validate(true)) isInvalid = true;
      });

      if (isInvalid) {
        alert("Please fill the required");
        return;
      }

      this.msg = " Submitted success!";
    },
  },
};
</script>

online demo - on app.vue you can switch between withform and without - https://codesandbox.io/s/child-component-validation-rikoq

ref - https://vuejs.org/v2/api/#ref

---

ref - Prevent Form Submission in Vue.js