1

Есть небольшой 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" отправляет результат и закрывает окно, если не верифицировано - не отправляется форма и не закрывается окно.

4
  • 1
    вся соль вот в этой строчке const valid = this.$refs.form.checkValidity(); Чтобы это заработало, необходимо в инпуты добавить аттрибут pattern, с соответствующей маской
    – Dmytro
    22 авг 2019 в 9:45
  • @Дмытрык, а в примере на бутстрапе просто require. Мне казалось в этом проблема this.itemNum.nameState выдает undefined хотя должно быть или vakid или unvalid
    – SVE
    22 авг 2019 в 13:13
  • 1
    itemNum - у Вас массив. Поэтому все верно пишет. Попробуйте записать так: this.nameState = valid ? "valid" : "invalid";
    – Dmytro
    22 авг 2019 в 13:26
  • @Дмытрык, спасибо! Заработало!
    – SVE
    22 авг 2019 в 16:40

1 ответ 1

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>

2
  • при чем тут name age ? Есть 6 полей под цифры которые выводятся циклом (в этом видимо и проблема) и которые нужно проверить на валидацию. Спасибо, но не то! И все же желательно bootstrap-vue
    – SVE
    22 авг 2019 в 8:32
  • это валидация формы. Верификация полей формы. Не важно какие компонеты и где форма. Делайте по примеру что я вам показал. 22 авг 2019 в 8:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.