How to check if validation passes with Vue Validate?

Question

I have a multi step form. Each step has its own validation and there is a "next" button for each step.

I'd like to check whether the form passes validation whenever the next button is clicked, and if validation fails, prevent moving to the next step.

Here is my form:

<form method="post">
  <div id="step1" v-show="step == 1">  
    <div class="form-group" :class="{'has-error': errors.has('startDate') }">
      <label for="startDate">Start Date</label>
      <input type="text" name="startDate" class="form-control" id="startDate" v-validate="'required'">
      <span v-show="errors.has('startDate')" class="text-danger">@{{ errors.first('startDate') }}</span>
    </div>
    <div class="form-group" :class="{'has-error': errors.has('adDuration') }">
      <label for="">Ad Duration</label>
      <select class="form-control" name="adDuration" v-on:change="total" v-model="adDetailOrder.unit" v-validate="'required'">
        <option v-for="adDuration in adDurations" :value="adDuration.unit">@{{ adDuration.text }}</option>
      </select>
      <span v-show="errors.has('adDuration')" class="text-danger">@{{ errors.first('adDuration') }}</span>
    </div>
  </div>

  <div id="step2" v-show="step == 2">
    //input form and v-validate goes here
  </div>

  <div id="step3" v-show="step == 3">
    //input form and v-validate goes here
  </div>
</form>

<button v-if="step == 1" type="button" class="btn btn-default" v-on:click="nextStep(2)">Next</button>
<button v-if="step == 2" type="button" class="btn btn-default" v-on:click="nextStep(3)">Next</button>
<button v-if="step == 3" type="button" class="btn btn-default" v-on:click="nextStep(4)">Next</button>

The next button runs this method:

nextStep: function(stepNumber) {
    //check validation step 1
    if (this.step == 1) {
        this.$validator.validate('startDate', this.startDate);
        this.$validator.validate('adDuration', this.adDuration);

        //if step 1 validation success
        //go to next step
        this.step = stepNumber;

        //else
        //stay this step and show error
    }
},

This code advances to the next step even when validation fails.

How can I make this work?

Answer 1

I don't believe you need to call validate explicitly. Errors will be detected automatically. In your nextStep method you could just check if there are any errors and return if there are.

nextStep: function(stepNumber) {
    if (this.errors.any())
        return

    ...
}

Additionally, how about disabling the button that calls nextStep if there are any errors?

<button :disabled="errors.any()" @click="nextStep">Next</button>