title: How to validate inputs on each step in a multi part form in vuejs?
body: <p>I have created step in each tabs which represent the steps in the form. I have used v-if condition to check which step should be displayed. As of now the steps work perfectly fine when i click the next button. Even if the inputs are empty I am able to go to the next step. I want some validation on each step that will check if the input is empty and add a class to that input say "error-class". How do I do that in vuejs?
  This is my form in .vue file. </p>
  
  <pre><code>&lt;form id="product_form" enctype="multipart/form-data"&gt;
                      &lt;!-- One "tab" for each step in the form: --&gt;
                      &lt;button type="button" v-if="step === 2 || step === 3 || step === 4" id="prevBtn1" @click.prevent="prev()"&gt;&lt;/button&gt;
  
                      &lt;div v-if="step === 1" class="tab"&gt;
                          &lt;h3&gt;Post a product&lt;/h3&gt;
                          &lt;div class="preview" id="preview"&gt;
                          &lt;/div&gt;
                          &lt;div class="single-holder"&gt;
                              &lt;input type="text" name="pname" id="pname" placeholder="Title*" required="true" ref="pname"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div v-if="step === 2" class="tab"&gt;
                          &lt;h3&gt;Describe your Product&lt;/h3&gt;
                          &lt;div class="descrip"&gt;
                              &lt;textarea name="description" id="description" placeholder="Description" required="true"&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div v-if="step === 3" class="tab"&gt;
                          &lt;h3&gt;Set Inventory&lt;/h3&gt;
                          &lt;div class="fixed-width"&gt;
                              &lt;div class="single-holder"&gt;
                                  &lt;label&gt;Quantity&lt;/label&gt;
                                  &lt;input type="number" name="quantity" id="quantity" required="true"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div v-if="step === 4" class="tab"&gt;
                          &lt;h3&gt;Share On&lt;/h3&gt;
                          &lt;div class="address-details-holder clearfix"&gt;
                              &lt;div class="single-holder"&gt;
                                  &lt;input placeholder="_ _ _ _" id="zipcode" name="zipcode" maxlength="4" type="text" @keypress="onlyNumber"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
  </code></pre>
  
  <p>This is my method in Vuejs</p>
  
  <pre><code>methods:{
  onlyNumber ($event) {
     let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
     if ((keyCode &lt; 48 || keyCode &gt; 57) &amp;&amp; keyCode !== 46) { // 46 is dot
        $event.preventDefault();
     }
      },
  prev() {
    this.step--;
  },
  next() {
      this.step++;
      //if(this.step===1){
          // console.log(this.$refs.name.value);
          //if(this.$refs.pname.value !== null){
          //  this.step++;
          //}
      //}
  }
  </code></pre>
  
  <p>As of now the steps work fine if i remove the if condition in the function next() in methods. But I need input validations on each step so the user has to fill out the missing data in all the form fields.</p>