Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Validation inconsistent on Mobile Devices #1225

Open
jasonatvelocity opened this issue Feb 15, 2024 · 2 comments
Open

Validation inconsistent on Mobile Devices #1225

jasonatvelocity opened this issue Feb 15, 2024 · 2 comments

Comments

@jasonatvelocity
Copy link

jasonatvelocity commented Feb 15, 2024

Make sure that you are familiar with documentation before submitting an issue.

https://vuelidate-next.netlify.com/

Describe the bug
We have a date picker that populates an "issueDate" text box field in the following format: "MM/YYYY". Vuelidate works great on all devices except mobile. We've mostly been able to reproduce on the iPhone devices using BrowserStack or a mobile phone.

In particular iPhone 15 v17.3, but it intermittently fails on all of them (sometimes it works, sometimes it doesn't). The problem is that when the date value is picked using the date picker the value is correctly set on all the models (inside v$ too) but the "this.v$.model.issueDate.required.$invalid" returns true (evaluates incorrectly).

To make matters worse, this issue is intermittent and very hard to reproduce (happens about half the time). Important note - it has only started happening since we upgraded to Vue 2.7. Prior to our upgrade it was not an issue.

We've inspected the v$ object and everywhere show's our date being set, however the $invalid flag is erroneously evaluated as true. Short of rolling our own validation on this field we are currently at a loss for how to fix it. Upgrading to the latest version of Vue is not yet an option for us. We've tried dozens of different approaches after reviewing the vuelidate documentation all met with no success.

To Reproduce
Steps to reproduce the behavior:

  1. Create a text box field with a date picker (we used the vuetify v-text-field and v-date-picker).
  2. Using a mobile device, attempt to pick a date (happens in all browsers, but we've been using safari to test)

Expected behavior
Vuelidate evaluates as valid when it is valid.

Screenshots
image
image
image

@jasonatvelocity
Copy link
Author

jasonatvelocity commented Feb 16, 2024

Just to follow up, we removed the required validator in the validations section of code and implemented custom checking to see if the property is set. While this fixes our problem there appears to be a deeper issue with the required decorator. Only way we were able to solve the issue was to circumvent vuelidate altogether. Hope this helps others facing similar issues. From what I’ve seen there appears to be severe issues around vue 2.7 and vuelidate making it difficult to use.

@jasonatvelocity
Copy link
Author

jasonatvelocity commented Feb 16, 2024

To the vuelidate team: please reach out and I can show the issue first hand. Unfortunately our code is proprietary so unable to share on this forum specific code samples.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant