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

Question

Я создал шаг в каждой вкладке, который представляет шаги в форме.Я использовал условие v-if, чтобы проверить, какой шаг должен отображаться.На данный момент шаги работают отлично, когда я нажимаю кнопку «Далее».Даже если входы пустые, я могу перейти к следующему шагу.Я хочу некоторую проверку на каждом шаге, которая проверит, является ли вход пустым, и добавит класс к этому входу, скажем «error-class».Как мне это сделать в 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 () в методах.Но мне нужны проверки ввода на каждом шаге, поэтому пользователь должен заполнить недостающие данные во всех полях формы.

Answer 1

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

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

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

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