When attempting to validate dates with the after: rule in vee-validate while also utilizing a computed field in Vue.js, the validation process may encounter unexpected issues

Question

When attempting to validate dates with the after: rule in vee-validate while also utilizing a computed field in Vue.js, the validation process may encounter unexpected issues

Below is a codepen with a simple input field for entering dates:

<input type="text" 
       v-model="startDate"  
       name="StartDate"
       v-validate="{ required: false, date_format: 'dd/MM/yyyy', before: maxStartDate }"/>

Despite entering a valid date, an error message keeps appearing:

The StartDate must be before 2019-08-01T03:59:59.999Z.

I've attempted the following solutions:

Returning JavaScript date objects and ISO dates as maxStartDate values.
Trying different combinations of validation rules such as removing date_format or required.
This issue has consumed hours of my time. It seems like I'm overlooking something obvious and will soon figure it out.

I also noticed that vee-validate uses UK-style locales in its messages. Despite being in the US, dates are displayed as 25/07/2019 which might be affecting date comparisons.

Codepen link: https://codepen.io/Kinetiq/pen/XLeEaM

javascript vue.js vee-validate

Answer 1

Answer №1

The validator called before may not function as expected. It requires a reference to another field containing a date - for example, when creating fields for startDate and endDate, you would want to ensure that the startDate comes before the endDate. This is what the before validator accomplishes.

Instead of using the before validator, consider utilizing date_between, like this:

<input type="text" 
       v-model="startDate"
       name="StartDate"
       v-validate="{ date_format: 'dd/MM/yyyy', date_between:['01/01/1990',maxStartDate] }"/>

I had to adjust how maxStartDate is defined in the following manner:

            maxStartDate: function() {
                return moment()
                    .startOf('month')
                    .add(1, 'months')
                    .endOf('month').format('DD/MM/YYYY');
            }

See a working demo here: https://codepen.io/anon/pen/NZaLzg

Answer 2

The validator called before may not function as expected. It requires a reference to another field containing a date - for example, when creating fields for startDate and endDate, you would want to ensure that the startDate comes before the endDate. This is what the before validator accomplishes.

Instead of using the before validator, consider utilizing date_between, like this:

<input type="text" 
       v-model="startDate"
       name="StartDate"
       v-validate="{ date_format: 'dd/MM/yyyy', date_between:['01/01/1990',maxStartDate] }"/>

I had to adjust how maxStartDate is defined in the following manner:

            maxStartDate: function() {
                return moment()
                    .startOf('month')
                    .add(1, 'months')
                    .endOf('month').format('DD/MM/YYYY');
            }

See a working demo here: https://codepen.io/anon/pen/NZaLzg

When attempting to validate dates with the after: rule in vee-validate while also utilizing a computed field in Vue.js, the validation process may encounter unexpected issues

Answer №1

Similar questions

Utilize axios-cache-interceptor to enforce caching of responses from axios

Adjust camera to align with the loaded object in Three.js

What is preventing ShowViaLink() from functioning properly in Firefox and Internet Explorer?

Is it possible to count the number of days in between and then apply a specific class to each of those days

The event listener fails to function properly in asynchronous JavaScript

Trigger jQuery Waypoints Only Once

What could be causing my jQuery to only toggle the first arrow in my HTML?

Opening multiple dialogs in Jquery Dialog box

Strategies for concealing and revealing content within dynamically loaded AJAX data

Retrieve a file from an AWS S3 bucket using AngularJS

Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

ESLint has detected a potential race condition where the `user.registered` variable could be reassigned using an outdated value. This issue is flagged by the `require-atomic-updates` rule

Angular's innerHTML dilemma

"Utilize browser detection to direct users to appropriate pages - whether by using htaccess or another method

Issues with jQuery .on() hover functionality in HTML5 select element not being resolved

What is the best way to link optional and undefined paths in AngularJS routing?

Issue with OpenLayers Icon not appearing on screen

Passing data from input to Angular's $scope (filter)

Deactivating a form field depending on a selected radio button in Angular 2

Display numerical data at precise locations above an image