Validation of date type input using Vee-Validate and Bootstrap-vue

I'm attempting to utilize vee-validate to verify if the user is inputting a valid date in a bootstrap-vue date input field. Even after following the vee-validate documentation, it appears that the expected behavior is not being achieved.

Validation does not work with either valid dates or invalid dates such as 31/06/2019 (dd/MM/yyyy).

Below is an example on CodePen:

https://codepen.io/anon/pen/wVewvK

<b-form-input v-model="selectedDate"
                  placeholder="Enter date"
                  v-validate="'date_format:dd/MM/yyyy'"
                  name="sdate"
                  type="date">
    </b-form-input>

Documentation:

vue.jsbootstrap-vuevee-validate

Answer №1

After some testing, I discovered that for input type="date", there is no need to perform any format validation. Simply using the required option of vee-validate will suffice and prevent any invalid dates from being accepted.

I have made updates to the codepen:

      <b-form-input :state="!errors.has('sdate')"
                    v-model="selectedDate"
                    placeholder="Enter sdate"
                    v-validate="'required'"
                    name="sdate"
                    type="date">
      </b-form-input>

Answer №2

When using native browser date inputs, make sure the date is in the format YYYY-MM-DD.

Find more information here

If you need to use a different date format than what the browser expects, use a text type input instead.

<b-form-input
  v-model="selectedDate"
  placeholder="Enter date"
  v-validate="'date_format:dd/MM/yyyy'"
  name="sdate"
  type="text">
</b-form-input>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Errors in vue.js conditions

I am currently attempting to validate whether my variable is empty. Despite reviewing my code, I am facing issues with its functionality. My current version of vue.js is 2.5.13 Below you can find the snippet of my code: <template> <div v-if ...

javascriptvue.js

Utilizing the ref received from the Composition API within the Options API

My current approach involves utilizing a setup() method to bring in an external component that exclusively supports the Options API. Once I have imported this component, I need to set it up using the Options API data. The challenge I face is accessing the ...

javascriptvue.jsvuejs3vue-composition-api

VueJS: using dynamic class names within the style attribute

Within my VueJS application, I have implemented Materializecss modals within single page components. Each modal requires a unique dynamic ID due to the application's requirements. The code snippet below showcases this: <template> <div :i ...

javascriptvue.js

Error encountered in Three JS Drag Controls: Unable to assign value to property 'x' as it is undefined

I've been trying to drag the spheres around the scene using drag controls that should be activated when the "m" key is pressed. However, I keep running into an issue where the objects don't move and I receive an error message saying "Uncaught Typ ...

javascriptvue.jsthree.jsvuetify.js

Error message "Exceeded the maximum call stack size" encountered during Vue-router authentication

I am currently in the process of developing a dashboard using Vue, Vuex, and Quasar. However, I have encountered an authentication error that is preventing me from progressing. Additionally, I need assistance in ensuring that when a user is already logged ...

javascriptvue.jsauthenticationvuejs2vuex

Is there a way to refresh my list following a POST request when utilizing a separate endpoint?

I'm struggling with updating my list after a POST request. I haven't been able to find any solutions online. Typically, I would just push an object into an array, but it seems different in this case. This function utilizes 2 API endpoints. The f ...

javascriptvue.js

How can we set up a Vue.js component before incorporating it into a template?

Currently, I am working on a Vue single file template where I need to fetch some data (a JWT token) and then use that token to make another request to a graphql endpoint. The Provider Component in my template requires the JWT Token to be set up with the ...

javascriptvue.jstemplatesgraphqlhook

The DOM fails to reflect changes in the data variable in VueJS

I am facing an issue while trying to update an array of arrays and display it as a reactive variable, however the DOM does not seem to reflect those changes. To achieve this, I have two components - a parent component and a child component: Parent Compon ...

javascriptvue.jsvuejs2

How to Retrieve Information from an Array in VueJS

At the moment, the data being displayed on my page is an array, as shown in the snippet below: https://i.stack.imgur.com/zAvrc.png However, I only want to retrieve or display the project names. This is all I have at the moment: fetch(context,id){ ...

javascriptarraysvue.js

Issues related to validation prior to submission

Having trouble with a VeeValidate example from the documentation. The example can be found here. I seem to be missing something crucial but can't figure out what it is. For some reason, my form always validates as valid, even when no text is entered ...

javascriptvalidationvue.jsvee-validate

Display an input field in VueJS with a default value set

Dealing with a form containing various editable fields, I devised a solution. By incorporating a button, clicking it would conceal the label and button itself, while revealing a text box alongside a save button. The challenge lays in pre-filling the textbo ...

javascriptvue.js

Exploring the Possibilities of WebAudio API through Asynchronous Events

Is there a way to trigger events after an oscillator finishes playing using the webaudio API? I am attempting to update my Vue component reactively to display data in the DOM while a note is being played. Here's a snippet of my code: <template> ...

javascriptasynchronousvue.jsweb-audio-api

What is the best way to create a list from a matrix using JavaScript?

I have an array structured as follows: const input_array= [ ["red", "green"], ["small", "medium"], ["x", "y", "z"] //... can have any number of rows added dynamically ...

javascriptvue.js

Ways to stop user authentication in Firebase/Vue.js PRIOR to email verification

I am currently working on a Vue.js and Firebase authentication interface with an email verification feature. The setup is such that the user cannot log in until they click the verification link sent to the email address provided during the login process. ...

javascriptvue.jsfirebase-authenticationvuex

Tips for passing props while clicking on a v-data-table:

I am currently facing an issue in my app while using v-data-table. I am able to pass props with an extra slot, but I want the entire row to be clickable in order to open a dialog with the prop item: <template v-slot:item.actions="{ item }"> ...

javascriptvue.jsvuetify.js

Exploring the dynamic data loading feature in Vue 3 by fetching data from the server and displaying it using a v-for

I am encountering an issue where I want to display data dynamically from a database using a v-for loop. However, when I attempt to push new data into the array, they show correctly in a console.log() but do not reflect any changes in the template. I have ...

javascriptvue.jsvuejs3v-for

Unusual "visual" phenomenon with autocomplete feature in VUE.js

Can someone review this code snippet? Check out the code here This is a peculiar example of a custom autocomplete VUE component. If you enter a value in one of the fields in Section 1 (like 'Apple'), then click on the Next button, you'll ...

javascriptvue.jsvuejs2vue-component

Navigating to a specific div within a component in Vuejs 2: Steps for routing

These are the routes I've set up for my application: const router = new VueRouter({ mode:'history', routes:[ { path:'/home', name:'home', component: Home }, { path: '/serv ...

javascriptlaravel-5vue.jsvuejs2vue-router

Iview Table UI Cell

Is there a way to retrieve the cell data from a library iview table in Vue.js upon clicking? I am looking to capture both the value of the cell and the title of the column, and then modify the CSS of that particular cell. For instance, clicking on one ce ...

javascriptvue.jsiview

Vue - Passing a parent's ref to a child component as a prop

Is there a way to pass the current component's reference to a child component in Vue.js? <template> <div class="screen" ref="screen"> <child-component :screenRef="screenRef"> </child-component> </div ...

javascriptvue.jsvuejs2