Верификация полей формы в модальном окне bootstrap vue
106
14 июня 2021, 18:20
Есть небольшой vue проект. Использую bootstrap-vue.
По примеру prevent-closing пытаюсь сделать модальное окно с формой.
В форме несколько полей (должны быть только цифры, должны быть заполнены все).
Код:
<template>
<div class="page">
<div class="b-container">
<b-button v-b-modal.modal-1>Launch demo modal</b-button>
<b-modal
id="modal-1"
hide-footer
title="Please, enter code:"
:body-bg-variant="bodyBgVariant"
>
<form ref="form" @submit.stop.prevent="handleSubmit">
<div class="pin-num text-center">
<ul class="pin-num-list">
<li :key="index" v-for="(item, index) in itemNum">
<b-form-input :id="item.id" :v-model="item.name" :state="item.nameState" required></b-form-input>
</li>
</ul>
</div>
<b-button @click="handleOk" class="mt-4" variant="primary" block>Submit</b-button>
</form>
</b-modal>
</div>
</div>
</template><script>
export default {
name: "AppPin",
data() {
return {
pin: "",
bodyBgVariant: "light",
name: "",
nameState: null,
submittedNames: [],
itemNum: [
{ id: "num-1", name: "", nameState: null },
{ id: "num-2", name: "", nameState: null },
{ id: "num-3", name: "", nameState: null },
{ id: "num-3", name: "", nameState: null },
{ id: "num-5", name: "", nameState: null },
{ id: "num-6", name: "", nameState: null }
]
};
},
methods: {
checkFormValidity() {
console.log(this.itemNum.nameState);
const valid = this.$refs.form.checkValidity();
this.itemNum.nameState = valid ? "valid" : "invalid";
return valid;
},
handleOk(bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault();
// Trigger submit handler
this.handleSubmit();
},
handleSubmit() {
// Exit when the form isn't valid
if (!this.checkFormValidity()) {
return;
}
console.log("AAAAAAAAAAAA");
// Hide the modal manually
this.$nextTick(() => {
this.$refs.modal.hide();
});
}
},
};
</script>Вопрос: Как по примеру реализовать верификацию формы в модальном окне ? Если все заполнено (цифрами) , то "submit" отправляет результат и закрывает окно, если не верифицировано - не отправляется форма и не закрывается окно.
Answer 1
Надо использовать обычную валидацию формы на vue
const app = new Vue({
el:'#app',
data:{
errors:[],
name:null,
age:null,
movie:null
},
methods:{
checkForm:function(e) {
if(this.name && this.age) return true;
this.errors = [];
if(!this.name) this.errors.push("Name required.");
if(!this.age) this.errors.push("Age required.");
e.preventDefault();
}
}
})input,select {
margin-left: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form id="app" @submit="checkForm" action="/something" method="post">
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<p>
<label for="name">Name<label>
<input type="text" name="name" id="name" v-model="name">
</p>
<p>
<label for="age">Age<label>
<input type="number" name="age" id="age" v-model="age" min="0">
</p>
<p>
<label for="movie">Favorite Movie<label>
<select name="movie" id="movie" v-model="movie">
<option>Star Wars</option>
<option>Vanilla Sky</option>
<option>Atomic Blonde</option>
</select>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
-
00:43
-
00:32
-
00:25
-
00:07
-
23:55
-
23:49
-
23:42
-
23:36
-
23:23
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 48033 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30576 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23995 visits
- Как через css изменить цвет png изображения? 10422 visits
- Blob video url download 10015 visits
- Php curl запрос через прокси с авторизацией 9291 visits
- Работа с captcha vk api 8156 visits
© "hostciti.net" 13.4.2025 | 19:00