Struggling to make Bootstrap-vue form validation functional

Question

Struggling to make Bootstrap-vue form validation functional

I am encountering an issue with form validation in Vue CLI and Bootstrap. When the page loads, all input fields show as invalid due to being assigned the is-invalid class. I managed to solve this problem by setting the state prop to null when it is false. It seems unusual for the validation to run automatically when the page loads, even though I have followed the bootstrap-vue documentation carefully.

Here's a snippet of my code:

<b-form
            @submit.prevent="addReview"
            name="review-form"
            class="needs-validation"
            novalidate
          >
            <div class="name">
              <label class="sr-only" for="form-input-name">Name</label>
              <b-input
                id="form-input-name"
                class="form-inputs mb-2 mr-sm-2 mb-sm-0"
                v-model="name"
                placeholder="Name"
                required
                :state="isEmpty(this.name) ? true : null"
              ></b-input>
              ...
          </b-form>

The issue arises from the ternary operator which needs three results - null on load to hide error messages, false to display errors on validation, and true to indicate valid input. After struggling with this for days, I would appreciate any help or suggestions regarding this setup. The submit button adds the class was-validated but does not validate inputs properly.

Question:
How can I validate inputs without displaying error messages on page load?

javascript twitter-bootstrap vue.js bootstrap-4 bootstrap-vue

Answer 1

Answer №1

Don't limit yourself to just using a ternary statement in the :state attribute - you can directly link :state to a computed property, offering several advantages (similar to what is demonstrated in the documentation):

You can have more than two conditions, bypassing the restrictions of the ternary statement.
The computed property will assess user input in real-time, ensuring immediate validation of the form input.
Your template code will be cleaner and easier to understand (which is crucial).

I'm building upon your example here, but something like the following should resolve your problem:

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png" style="margin-bottom: 15px;">
    <b-form>
      <div class="name">
        <label class="sr-only" for="form-input-name">Name</label>
        <b-input v-model="name" id="form-input-name" :state="isNameStateValid"></b-input>
      </div>
    </b-form>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        name: ""
      };
    },
    methods: {
      isValid() {
        return this.name.length > 3 ? true : false; //your validation criteria goes here
      }
    },
    computed: {
      isNameStateValid() {
        if (this.name) {
          return this.isValid(this.name);
        }
        return null;
      }
    }
  };
</script>

In the above example, you would have a method that validates against your specific criteria (isValid, isEmpty, etc.).

The new computed property, isNameStateEmpty, will utilize the return value of that method, returning false for a failed validation (triggering BootstrapVue's validation failure state), true for a successful validation, or null if this.name does not currently have a value (such as on page load or if a user empties the input field).

Check out a live Codesandbox showcasing this behavior here.

Since the input's v-model (v-bind:value and @change) is connected to our "name" data property, any changes in the input field will automatically update our data property (this.name).

Given that our isNameStateValid computed property depends on this.name, it will continuously reassess with every change in the this.name data property - guaranteeing real-time validation using BootstrapVue's validation system.

I hope this explanation is helpful.

Answer 2

Don't limit yourself to just using a ternary statement in the :state attribute - you can directly link :state to a computed property, offering several advantages (similar to what is demonstrated in the documentation):

You can have more than two conditions, bypassing the restrictions of the ternary statement.
The computed property will assess user input in real-time, ensuring immediate validation of the form input.
Your template code will be cleaner and easier to understand (which is crucial).

I'm building upon your example here, but something like the following should resolve your problem:

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png" style="margin-bottom: 15px;">
    <b-form>
      <div class="name">
        <label class="sr-only" for="form-input-name">Name</label>
        <b-input v-model="name" id="form-input-name" :state="isNameStateValid"></b-input>
      </div>
    </b-form>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        name: ""
      };
    },
    methods: {
      isValid() {
        return this.name.length > 3 ? true : false; //your validation criteria goes here
      }
    },
    computed: {
      isNameStateValid() {
        if (this.name) {
          return this.isValid(this.name);
        }
        return null;
      }
    }
  };
</script>

In the above example, you would have a method that validates against your specific criteria (isValid, isEmpty, etc.).

The new computed property, isNameStateEmpty, will utilize the return value of that method, returning false for a failed validation (triggering BootstrapVue's validation failure state), true for a successful validation, or null if this.name does not currently have a value (such as on page load or if a user empties the input field).

Check out a live Codesandbox showcasing this behavior here.

Since the input's v-model (v-bind:value and @change) is connected to our "name" data property, any changes in the input field will automatically update our data property (this.name).

Given that our isNameStateValid computed property depends on this.name, it will continuously reassess with every change in the this.name data property - guaranteeing real-time validation using BootstrapVue's validation system.

I hope this explanation is helpful.

Struggling to make Bootstrap-vue form validation functional

Answer №1

Similar questions

When an absolute positioned DIV is nested inside a relatively positioned DIV, it disappears when the page is scrolled

Animation of disappearing blocks covering the entire screen

Does JSX have an API that can handle self-closing tags, such as <br>, if they are not closed properly?

Using Scrollspy with sticky-top in Bootstrap allows for easy navigation and fixed positioning of elements

What is the best way to notify the JSON code below using jQuery?

Is there a way to store JSON data in a constant variable using Node Fetch without encountering the error TypeError [ERR_INVALID_URL]: Invalid URL?

Deliver feedback from NodeJS Server to JavaScript on the client side

Change the z-index of divs when clicked

What is the best way to navigate back on a button click in jquery AJAX without causing a page refresh?

A series of OR interfaces in TypeScript Interface

Displaying a loading spinner using JQuery while content is being loaded into a div

Troubleshoot the reason behind the malfunctioning Console log on the website

Tips for transferring an entire array to a servlet and retrieving it efficiently

Dynamic font size that adjusts as you change the window dimensions

Saving user input as a local variable to be utilized on a different web page

Issue with Basic jQuery Demonstration (Failure to Conceal Item)

Issue with aligning the image product in Bootstrap 4

Ways to retrieve particular items/properties from the JSON response string

Reacting to URL Changes but Failing to Load the Requested Page

What happens when a JavaScript variable is used inside the $.ajax function and returns null?