title: How to change input filed border color into red. When fields are empty
body: <p>Here I have written a code for validating form input fields in Vue. And it is working fine when input fields are empty the form is not navigating to the next step. My issue is that while the field is empty, and the user tries to navigate to the next step, the input field border color should change in red. If one field is empty and the user is trying to navigate another step, the navigation should prevent, and the empty fields' border should be displayed in red.</p>
  <pre><code>&lt;div id=&quot;vk_app&quot;&gt;
    &lt;form&gt;
    
    &lt;div v-if=&quot;step === 1&quot;&gt;
  
      &lt;h1&gt;Step One&lt;/h1&gt;
      &lt;p&gt;
      &lt;legend for=&quot;name&quot;&gt;Your Name:&lt;/legend&gt;
      &lt;input id=&quot;name&quot; name=&quot;name&quot; v-model=&quot;name&quot;&gt;
      &lt;input id=&quot;name&quot; name=&quot;name&quot; v-model=&quot;age&quot;&gt;
      &lt;/p&gt;
  
      &lt;button @click.prevent=&quot;next()&quot;&gt;Next&lt;/button&gt;
  
    &lt;/div&gt;
    &lt;div v-if=&quot;step === 2&quot;&gt;
        &lt;template&gt;
         &lt;input id=&quot;name&quot; name=&quot;name&quot; v-model=&quot;address&quot;&gt;
          &lt;input id=&quot;name&quot; name=&quot;name&quot; v-model=&quot;h_no&quot;&gt;
          &lt;input id=&quot;name&quot; name=&quot;name&quot; v-model=&quot;mobile&quot;&gt;
          &lt;button @click.prevent=&quot;prev()&quot;&gt;Previous&lt;/button&gt;
          &lt;button @click.prevent=&quot;next()&quot;&gt;Next&lt;/button&gt;
        &lt;/template&gt;
    &lt;/div&gt;
  
    &lt;div v-if=&quot;step === 3&quot;&gt;
      &lt;template&gt;
         &lt;input id=&quot;name&quot; name=&quot;name&quot; v-model=&quot;subject&quot;&gt;
          &lt;input id=&quot;name&quot; name=&quot;name&quot; v-model=&quot;occupation&quot;&gt;
          &lt;button @click.prevent=&quot;prev()&quot;&gt;Previous&lt;/button&gt;
          &lt;button @click.prevent=&quot;next()&quot;&gt;Next&lt;/button&gt;
        &lt;/template&gt;
  
      &lt;button @click.prevent=&quot;prev()&quot;&gt;Previous&lt;/button&gt;
      &lt;button @click.prevent=&quot;submit()&quot;&gt;Save&lt;/button&gt;
  
    &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>vue.js</strong></p>
  <pre><code>const app = new Vue({
    el:'#vk_app',
    data() {
      return {
        step:1,
          name:null,
          age:null,
          city:null,
          state:null,
      }
    },
    methods:{
      prev() {
        if(this.checkForm()) {
          this.step--;
        }
      },
      next() {
        if(this.checkForm()) {
          this.step++;
        }
      },
      checkForm: function (e) {
        if (this.name &amp;&amp; this.age) {
          return true;
        }
  
        this.errors = [];
  
        if (!this.name) {
          this.errors.push('Name required.');
        }
        if (!this.age) {
          this.errors.push('Age required.');
        }
  
        e.preventDefault();
      }
      }
  });
  </code></pre>