Bootstrap vue b-modal does not highlight the field on submission of the data

Question

I am using the bootstrap vue to design my application. Within the application, I am using the b-modal. Some of the fields in b-modal are required so I would like to highlight them if the user has not provided information to them. In normal bootstrap which I have used in other applications, it was highlighting the field and showing a default message field is required but in the bootstrap-vue I am not getting any such message by default. Can someone please tell me what needs to be done about it?

Following is the bootstrap vue modal code I have:

<template>
  <b-modal
    id="formSubmission"
    size="lg"
    title="Basic Details"
    :visible="visibility"
    style="width: 100%"
    @cancel="hideModal"
    @ok="submitModal($event)"
  >
    <b-form-select v-model="type" class="form-control" required>
      <b-form-select-option value="type1">
        Type1
      </b-form-select-option>
      <b-form-select-option value="type2">
        Type2
      </b-form-select-option>
    </b-form-select>

    <div v-if="type == 'type1'">
      <input
        type="text"
        class="form-control"
        style="width:200px"
        autocomplete="off"
        placeholder="Enter Name"
        :required="type == 'type1'"
      >
    </div>
  </b-modal>
</template>

<script>
export default {
  data () {
    return {
      visibility: true
    }
  },
  methods: {
    hideModal () {
      this.visibility = false
    },

    submitModal (event) {
      event.preventDefault()
    }
  }
}
</script>

<style>
</style>

What I want to do is highlight the field which is required during the submission? I want to know if there is an out-of-the-box way to do it rather than writing the function for each and every field.

Something like this:

Answer 1

The modal doesn't know you have input elements inside it, and that you want to validate it. Which is why nothing happens.

You can solve this in a few ways. The way i would recommend is to first create a form around your input fields with <b-form>. Then when clicking on the OK button, we need to submit the form, as that will then validate the inputs and show an error if the requirements are filled.

We will then use the modal-footer slot, to overwrite the default footer and replace it with our own buttons. For the cancel button we'll use the cancel method from the slot scope, so that it will function as default.

However, for the OK button, we will use the form attribute and type="submit", to create a submit button for the form inside the modal. The form attribute takes the id from our form.

If the form is submitted succesfully, we'll need to hide the modal manually. In the snippet we use this.$bvModal.hide for this.

new Vue({
  el: '#app',
  data() {
    return {
      value: ''
    }
  },
  methods: {
    onSubmit() {
      const {
        value
      } = this;
      alert(`Submitted: ${value}`);

      this.$bvModal.hide('my-modal')
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app" class="p-4">
  <b-btn v-b-modal.my-modal>Show Modal</b-btn>
  <b-modal id="my-modal" title="Form Modal" visible>
    <b-form id="my-form" @submit.prevent="onSubmit">
      <b-input v-model="value" required minlength="3" autofocus placeholder="Write something.."></b-input>
    </b-form>

    <template #modal-footer="{ cancel }">
      <b-btn @click="cancel">Cancel</b-btn>
      <b-btn variant="primary" type="submit" form="my-form">OK</b-btn>
    </template>
  </b-modal>
</div>