How to prevent a form to navigate to next step. while input fields is empty. Using vue.js

Question

Here I am trying to prevent a form to navigate to a next step while the input field is empty.I have written a method for that in vue But I am not able to achieve that as I am new in vue.js. So I am trying to achieve but i was failed. So if anyone Have an idea please help me.I want to make a border highlight when fields are empty and user clicks next then field border should highlight.

<div id="vk_app">
  <form>
  
  <div v-if="step === 1">

    <h1>Step One</h1>
    <p>
    <legend for="name">Your Name:</legend>
    <input id="name" name="name" v-model="category">
    <input id="name" name="name" v-model="password">
    <input id="name" name="name" v-model="Email">
    </p>

    <button @click.prevent="next()">Next</button>

  </div>
  <div v-if="step === 2">
      <template>
       <input id="name" name="name" v-model="address">
        <input id="name" name="name" v-model="h_no">
        <input id="name" name="name" v-model="mobile">
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="next()">Next</button>
      </template>
  </div>

  <div v-if="step === 3">
    <template>
       <input id="name" name="name" v-model="subject">
        <input id="name" name="name" v-model="occupation">
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="next()">Next</button>
      </template>

    <button @click.prevent="prev()">Previous</button>
    <button @click.prevent="submit()">Save</button>

  </div>
  </form>
</div>

vue.js

<script>
const app = new Vue({
  el:'#vk_app',
  data() {
    return {
      step:1,
        category:null,
        street:null,
        city:null,
        state:null,
    }
  },
  methods:{
    prev() {
      this.step--;
    },
    next() {
      this.step++;
    },
    checkForm: function (e) {
      if (this.name && this.age) {
        return true;
      }

      this.errors = [];

      if (!this.name) {
        this.errors.push('Name required.');
      }
      if (!this.age) {
        this.errors.push('Age required.');
      }

      e.preventDefault();
    }
    }
});
</script>

Answer 1

You have a method checkForm but it seems you never call it.

Just change your next and prev methods to use that method as follows:

prev() {
  if(this.checkForm()) {
    this.step--;
  }
},
next() {
  if(this.checkForm()) {
    this.step++;
  }
},