How do I check if the Vee Validate check passes?
I have a multi-step form. Each step has its own check, and there is a "next" button for each step.
I want to check if the form passes when the next button is validated, and if validation fails then don't proceed 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 launches 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 continues to the next step even when no validation is performed.
How can I make this work?
source to share
I don't believe you need to call explicitly validate
. Errors will be detected automatically. In your nextStep method, you can simply check if there are any errors and return if there are any.
nextStep: function(stepNumber) {
if (this.errors.any())
return
...
}
Also, how about disabling the button calling nextStep
if there are any errors?
<button :disabled="errors.any()" @click="nextStep">Next</button>
source to share
Too late to really help Dark Cyber, but for anyone looking here, the Promise$validator.validate
returns , so you can do
Promise.all([this.$validator.validate('startDate'), this.$validator.validate('adDuration')])
.then(validArray => {
//validArray should be an array of booleans, make sure they're all true
if (validArray.every(Boolean)) {
this.step = stepNumber
} else {
// Otherwise go to the catch block
throw new Error();
}
}).catch(error => {
// error handling
});
source to share