Как проверить вводимые данные на каждом шаге в форме, состоящей из нескольких частей, в 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.info(this.$refs.name.value);
        //if (this.$refs.pname.value !== null){
        //  this.step++;
        //}
    //}
}

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

JS - События опций формы
JS - События опций формы
В продолжение предыдущей статьи CSS - стили, связанные с вводом формы , в этой статье мы будем использовать JS для взаимодействия с формами, на этот...
CSS - Стили, связанные с вводом формы
CSS - Стили, связанные с вводом формы
Общими стилями ввода для форм являются Input (включая Text, Radio, checkbox), Select и Textarea, из которых Input относительно прост, поэтому в этой...
Создание многостраничной формы заявления о приеме на работу с помощью Angular
Создание многостраничной формы заявления о приеме на работу с помощью Angular
Наличие на корпоративном сайте форм заявлений о приеме на работу, или "трудовых анкет", экономит время и деньги как для соискателей, так и для...
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

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