Как проверить вводимые данные на каждом шаге в форме, состоящей из нескольких частей, в vuejs?

Я создал шаг на каждой вкладке, который представляет шаги в форме. Я использовал условие v-if, чтобы проверить, какой шаг должен отображаться. На данный момент шаги работают отлично, когда я нажимаю кнопку «Далее». Даже если входы пусты, я могу перейти к следующему шагу. Мне нужна некоторая проверка на каждом шаге, которая проверяет, является ли ввод пустым, и добавляет класс к этому вводу, скажем, «класс ошибки». Как мне это сделать в vuejs? Это моя форма в файле .vue.

<form id="product_form" enctype="multipart/form-data">
                    <!-- One "tab" for each step in the form: -->
                    <button type="button" v-if="step === 2 || step === 3 || step === 4" id="prevBtn1" @click.prevent="prev()"></button>

                    <div v-if="step === 1" class="tab">
                        <h3>Post a product</h3>
                        <div class="preview" id="preview">
                        </div>
                        <div class="single-holder">
                            <input type="text" name="pname" id="pname" placeholder="Title*" required="true" ref="pname">
                        </div>
                    </div>

                    <div v-if="step === 2" class="tab">
                        <h3>Describe your Product</h3>
                        <div class="descrip">
                            <textarea name="description" id="description" placeholder="Description" required="true"></textarea>
                        </div>
                    </div>

                    <div v-if="step === 3" class="tab">
                        <h3>Set Inventory</h3>
                        <div class="fixed-width">
                            <div class="single-holder">
                                <label>Quantity</label>
                                <input type="number" name="quantity" id="quantity" required="true">
                            </div>
                        </div>
                    </div>

                    <div v-if="step === 4" class="tab">
                        <h3>Share On</h3>
                        <div class="address-details-holder clearfix">
                            <div class="single-holder">
                                <input placeholder="_ _ _ _" id="zipcode" name="zipcode" maxlength="4" type="text" @keypress="onlyNumber">
                            </div>
                        </div>
                    </div>
                </form>

Это мой метод в Vuejs

methods:{
onlyNumber ($event) {
   let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
   if ((keyCode < 48 || keyCode > 57) && 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++;
        //}
    //}
}

На данный момент шаги работают нормально, если я удалю условие if в функции next () в методах. Но мне нужны проверки ввода на каждом шаге, поэтому пользователь должен заполнить недостающие данные во всех полях формы.

1
0
1 332
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Думаю, можно использовать Vee Validate. Это поможет вам проверить, требуется ли каждый вход

<input v-validate="'required'" data-vv-as="field" name="required_field" type="text">

И вернуть сообщение об ошибке для этого ввода, если оно ложно

<span>{{ errors.first('email') }}</span>

Будет ли это работать на каждом шаге или срабатывает только при отправке?

Raj 26.10.2018 09:18

он срабатывает только при отправке, но вы можете установить переменную в данных для проверки на каждом шаге

Hưng hoàng 26.10.2018 10:05

удалось решить эту проблему с помощью этого ------------------------------------------- ----------------- ‌ -------------------- ‌ --------- ----- if (this.step === 1) {if (this. $ refs.pname.value! == '') {this.step ++; }}

Raj 26.10.2018 10:43

Другие вопросы по теме