search

paul-thebaud / v-phone-input

International and accessible phone input for Vuetify 3 and Vue 3.
https://paul-thebaud.github.io/v-phone-input/
MIT License
65 stars 6 forks source link

bug: unexpected validation on input initialization/country change #21

Closed MaciejDybowski closed 10 months ago

MaciejDybowski commented 10 months ago

Expected Behavior

When I add additional validation functions, even if the simplest one is that the field is required I would like this validation to not run automatically and only at the time of the validate() function. Something along the lines of lazy-validation.

Because as far as validation during typing is concerned, as much as possible it should be auto/"live" during typing

Actual Behavior

Currently, as soon as you add the validation function required (1:1 from the documentation), the field lights up red image

Steps to Reproduce the Problem

  1. Add input
  2. Add rule "required" from readme
  3. the field lights up red

Specifications

paul-thebaud commented 10 months ago

Hi @MaciejDybowski, this is for sure a problem. But I'm facing an issue with this. Here are two use cases:

  1. If user change country without having filled the phone input: we expect no "required" message to show, because user did not interact with phone field.
  2. If user change country when already having filled the phone input: validation should run because changing country while keeping a phone number input might have change the phone validity.

The problem is that the package cannot know which rule should run when. What I can do is to delay the validation after the country initialization: this would prevent the required message to show at init, but in fact when the user will change country before filling his phone number, the message will immediately show. So, a problem remains.

I currently don't have any "stable and safe" solution for this, so if you have any suggestion, those are welcome!

PS: I'm not facing the issue on my apps because I use validation-on="submit" on my Vuetify <v-form>.

OmarHossamEldin commented 10 months ago

i have the same issue as well

OmarHossamEldin commented 10 months ago

i found the solution maybe you as it fits me as well i using property validate-on='blur lazy' it made the input trigger error on blur the input and on submit as well example

paul-thebaud commented 10 months ago

After taking time to think about, I might came across a solution. Currently, everytime the country value change, the validation gets run (done by this line).

So a solution might be run validation function only when the phone input is filled. This would fix both problems.

paul-thebaud commented 10 months ago

This solution does not allow validating the country only changes, but does can be managed with the include/exclude countries props.

paul-thebaud commented 10 months ago

Hey @MaciejDybowski and @OmarHossamEldin, I released v4.1.1 with a fix for this issue :tada: Feel free to comment/reopen if this is still an issue.