Проверьте определенное количество полей ввода с помощью vee-validate - PullRequest
Новая
       6

Проверьте определенное количество полей ввода с помощью vee-validate

0 голосов
/ 16 апреля 2019

Я хочу проверить шаги varios в мастере, не проверяя все входные данные, при нажатии на следующую кнопку. При нажатии на следующую кнопку она должна запустить функцию проверки полей ввода первого шага. Затем на следующем шаге вводятся поля ввода второго шага и так далее. Следующая кнопка не является кнопкой отправки. 

 <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);
        }
}
}

1 Ответ

0 голосов
/ 16 апреля 2019

Это довольно легко со встроенными областями VeeValidate, вы можете прочитать об этом на этой странице: введите описание ссылки здесь

Простое объяснение состоит в том, чтобы добавить конкретную область действия для каждой вкладки / шага, добавив это в поля: 

data-vv-scope="step1"

А затем используйте этот метод при нажатии кнопки для проверки: 

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