Validate specific amount of input fields with vee-validate

Question

I want to validate varios steps in a wizard, without validating all inputs, when clicking on the next button. When clicking on the next button it should fire the function to validate the input fields of the first step. Then in the next step the input fields of the second step and so on. The next button is no submit button.

 <tab-content title="Company" icon="fas fa-building" :before-change="validateThirdStep">
            <div class="col-md-8 offset-md-2">
                <label class="col-form-label text-md-right">Do you have a chicken?</label>
                <div class="form-goup row">
                    <div class="col-md-7">
                        <input type="radio" name="dsb" id="radios" value="yes" v-model="pickeddsb">Yes
                        <input type="radio" name="dsb" id="radios" value="no" v-model="pickeddsb">No
                    </div>
                </div>
            </div>

            <div class="form-group" v-if="pickeddsb=='yes'">
                <div class="col-md-8 offset-md-2">
                    <h4>Data</h4>
                </div>

                <div class="col-lg-8 m-auto">

                        <!-- Name -->
                        <div class="form-group row">
                        <label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
                        <div class="col-md-7">
                            <input
                            v-model="namedsb"
                            v-validate="'required|namedsb'"
                            :class="{ 'has-error': errors.has('namedsb') }"
                            type="text"
                            name="namedsb"
                            >
                            {{ errors.first('namedsb') }}
                        </div>
                        </div>

                        <!-- Firm -->
                        <div class="form-group row">
                        <label class="col-md-3 col-form-label text-md-right">{{ $t('companyname') }}</label>
                        <div class="col-md-7">
                            <input
                            v-model="firm"
                            v-validate="'required|firmdsb'"
                            :class="{ 'has-error': errors.has('firmdsb') }"
                            class="form-control"
                            type="text"
                            name="firmdsb"
                            >
                            {{ errors.first('firmdsb') }}
                        </div>
                        </div>

                        <!--Telephone-->
                        <div class="form-group row">
                        <label class="col-md-3 col-form-label text-md-right">{{$t('telephone')}}</label>
                        <div class="col-md-7">
                            <input
                            v-model="telephonedsb"
                            v-validate="'required|telephonedsb'"
                            :class="{ 'has-error': errors.has('telephonedsb')}"
                            class="form-control"
                            type="tel"
                            name="telephonedsb"
                            >
                            {{ errors.first('telephonedsb') }}
                        </div>
                        </div>

                        <!-- Email -->
                        <div class="form-group row">
                        <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
                        <div class="col-md-7">
                            <input
                            v-model="emaildsb"
                            v-validate="'required|emaildsb'"
                            :class="{ 'has-error': errors.has('emaildsb') }"
                            class="form-control"
                            type="email"
                            name="emaildsb"
                            >
                            {{ errors.first('emaildsb') }}
                        </div>
                        </div>
                </div>
            </div>

        </tab-content>

export default {
data() {
return {
 namedsb: "",
 telephonedsb: "",
 emaildsb: "",
 namere: "",
 telephonere:"",
 emailre: "",
        }
 },
methods: {
   validateThirdStep: function() {
            this.$validator.validate('namedsb', this.namedsb);
            this.$validator.validate('firmdsb', this.firmdsb);
            this.$validator.validate('telephonedsb', this.state);
            this.$validator.validate('emaildsb', this.emaildsb);
        }
}
}

Jesper Jesper · Accepted Answer · 2019-04-16T13:41:59

It's fairly easy with the built-in scopes of VeeValidate, you can read about it on this page: enter link description here

A simple explanation is to add a specific scope for each tab/step, by adding this on the fields:

data-vv-scope="step1"

And then use this method when pressing the button for validation:

methods: {
    validateForm(scope) {
        this.$validator.validateAll('step1').then((result) => {
            if (result) {
                alert('Form Submitted!');
            }
        });
    }
}

Validate specific amount of input fields with vee-validate

1 Answers