Vee-validate: Input cleared on validation on a mobile device

[tiapossoftware]

Versions:

• VueJs: 2.5.16
• Vee-Validate: 2.0.8

Description:

When on a mobile device, when an input fails the validation (like email), the input field is cleared of it's value. Unless I'm doing something wrong.

Steps To Reproduce:

Create an input with v-validate="'required|email'" and try to type into the input on a mobile device (Android in my case). Once the validation has fired, the error message is generated and the input value is cleared. So basically you can't type anything, unless you add a delay using data-vv-delay="1000", which will clear it after 1 second.
Any ideas?

[logaretm]

Could you create an example on codesandbox, and check if its similar to #1251

[tiapossoftware]

Is there anything in your module that clears the input for any reason? just trying to get a clue as to what is going on here as it works perfectly on any desktop browser.

[tiapossoftware]

I've investigated this problem and found that on a mobile device, Vue does not update the data as you type when using 2 way binding (v-model), it updates much less frequently. So what happens is the update back to the model hasn't happened yet and the validation fires. When the control is updated to show the error, the empty data from the data model is written back into the input, clearing it.
Maybe a way to fix it would be to make sure all the v-model fields are updated back to the data at the start of the validation, is there a way to do that?

[logaretm]

Currently, vee-validate uses Vue.$watch API if the model is present, and HTML5 listeners if it's not. If Vue's listener handler occurs after the validation the input will seem to be locked since it triggers DOM updates due to the errors object adding/removing messages.

The idea is to detect when v-model triggeres the value commitment and validate afterward, for example, .lazy is handled to validate on change instead of input for mobile devices I have not yet found which event is being used on the v-model. I've seen composing events being used but I have to read up on them more.

[arenddeboer]

Is there something we can do to prevent this until a fix has been implemented ? I am currently facing this exact problem.
Update: I found this only happens when I have the input v-model set to an object property, eg user.name. When I have it set to a single variable this issue does not happen.

[logaretm]

You could change the validation event to use 'change' instead of input.

>

Vue.use(VeeValidate, { events: 'change' });

I will try to implement a fix next week.

[tiapossoftware]

On the actual input in the Vue template adding data-vv-validate-on="blur" also solves the problem, although obviously validation doesn't occur until focus is lost, which was fine for my implementation.

[pschaub]

@logaretm When will this issue be fixed? It's really annoying for our users.

[arenddeboer]

When you make a hefty donation or provide a PR.

[logaretm]

Haven't found the time to implement a proper fix, you could always validate
on change event and it should work.

On Wed, 20 Jun 2018, 11:15 Arend de Boer, [e-mail] wrote:

When you make a hefty donation or provide a PR.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/baianat/vee-validate/issues/1281#issuecomment-398681511,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF-KSmsLvnDjlXfF68Qoy1QI1dupVEeKks5t-hKZgaJpZM4TlkrS
.

[pschaub]

@logaretm Will it break anything or change the behaviour in any direction if we use the change event?

[logaretm]

The change event occurs when the value of the input is committed, typically
with the blur event, so the validation will be less aggressive, validating
only when the user leaves the input. Changing this as the default behaviour
may produce unintended results for the current users. So you should make
the decision of when to validate

On Thu, 21 Jun 2018, 11:49 pSchaub, [e-mail] wrote:

@logaretm https://github.com/logaretm Will it break anything or change
the behaviour in any direction if we use the change event?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/baianat/vee-validate/issues/1281#issuecomment-399043979,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF-KSpWcV9wyfhyoO52tP7GD7DpfrcONks5t-2wsgaJpZM4TlkrS
.

[logaretm]

I revisited this issue with 2.1.0-beta.2 on Moto-Z Andriod 8.0, it seems to happen when using v-model on a non-existing model at the component ctor options, which won't be fixed.

Please, whoever has this issue create an example so I can confirm it, or maybe I missed a test case.

I will close this for now since it occurs due to improper model binding and already has a workaround by using the change event.

[pschaub]

@logaretm Can you explain what "on a non-existing model at the component ctor options" means?

[logaretm]

I mean its not initialized in the data:

<template>
    <form @submit.prevent="validateForm">
    <input type="text" v-model="name" v-validate="'required'" name="name">
    <pre>
      {{ errors.first('name') }}
    </pre>
    </form>
</template>

<script>
export default {
  data: () => ({
    val: ''
  })
}
</script>

The name model does not exist and will trigger this behavior if it is not the case for you please produce a reliable demonstration so I can better understand the problem.

[EliasChampi]

I still have the same problem with Motorola and Huawey :( some solution apart from .lazy , thanks thanks

[kent666a]

I found that it has no problem on Firefox, but it is not stable in chrome. When it is an object's property, if the property is null, it may not be able to input. If you give the property a default value, there will be no problem.

[kamilmaliszewski]

@kent666a thx. I added empty '' string instead null and now it works :) Thx for save my day.

Btw -> Validation Provider + Vee validate 2.1.6 + Vue 2.5.22

[kunalrawat425]

I will close this for now since it occurs due to improper model binding and already has a workaround by using the change event.

Changing event will not help us , as its your library, in all cases it must work on all platforms, I loved vee-validate just because of keyup validation and my issue is, input gets cleared if validation is DETECTED only incognito android chrome,and works like charm on all devices, changing to event catches validation on focus out and submit,i need a fix for my issue without changing behaviour