Vee-validate: Custom Component Validation - Working but with an offset.

[bobrosset]

Versions:

• VueJs: 2.5.13
• Vee-Validate: 2.0.6

Description:

I'm using a component to create custom inputs. I followed the Custom Component Validation steps. Validation works, but, a few characters away.
If I pass required|min:3 then on the 4th character I got it validated. If then I added a 5th character, and then delete them, only when one is left I get the error message.

Code:

Data to iterate (On components that renders a grid)

        columns: {
          id: {
            notEditable: true,
          },
          firstname: {
            type: 'inputText',
            validation: 'required|min:3',
          },
          lastname: {
            type: 'inputText',
            validation: 'required|min:3',
          },
          company: {
            type: 'inputText',
            validation: 'min_value:3',
          },
          phone1: {
            type: 'inputText',
            validation: 'required|numeric',
          },
          phone2: {
            type: 'inputText',
            validation: 'numeric',
          },
          phone3: {
            type: 'inputText',
            validation: 'numeric',
          },
        }

Parent (list.vue)

      <div slot="body">
        <div v-for="(column, key) in columns">
          <div v-if="!column.notEditable" class="input-row">
            <label>{{ column.name ? column.name : key }}:</label>
            <component :is="column.type" v-model="selectedObject[key]" v-validate="column.validation" data-vv-value-path="value" :data-vv-name="key" :has-error="errors.has(key)" />
            <span v-show="errors.has(key)" class="help is-danger">{{ errors.first(key) }}</span>
          </div>
        </div>
      </div>

Children (inputText.vue)

<template>
  <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)" v-bind:class="{ error : hasError }"></input>
</template>

<script>
  module.exports = {
    props: {
      value: null,
      hasError: null,
    },
    data: function() {
      return {};
    },
    methods: {
      updateValue: function (value) {
        this.$emit('input', value);
      },
    },
  };
</script>

Something else I discovered is that if I go to another tab, and then get back to this one, the error is updated.

[logaretm]

Sorry about the late response. This is a weird one, it works fine if HTML inputs were used. But Vue doesn't seem to pick up the updates done to the errors object when combined with the component component.

https://jsfiddle.net/g3Lfmx46/

I will try different approaches and report back.

[logaretm]

Seems to work fine as well if you are using the component directly rather than the dynamic component:

https://jsfiddle.net/g3Lfmx46/1/

[logaretm]

This is silly, but self closing tags does seem to be the issue here:

https://jsfiddle.net/g3Lfmx46/2/

[bobrosset]

@logaretm, I tried your last example, adding a closing tag. But I get the same result. I literally copy&paste your code. I don't think I'm using any weird library, not even jQuery. I don't mind if you want to check, to share my screen. If not, I can try to dig into the library to see what's going on. Thanks in advance, whatever you decide to do mate.

[logaretm]

You could try to replicate the example in codesandbox and remove any non-relevant code. This will make the environment as close as possible to your project since it uses webpack.

[bobrosset]

I gave it a try, without using a generic component an :is, and the same bloody error. I'm thinking then that maybe, something else is blocking it.

I'll dive deeper Tomorrow.

[dcdrawk]

I ran into the same issue after updating Vee-Validate from 2.0.0-rc27 to 2.0.6. I've taken the example fiddle and made it a bit more simplified, with just one input and a required rule. After testing a few different releases, it seems this bug was introduced in 2.0.0.

If you enter a single character into the input, the 'required' validation error message shows up. It disappears if the input is blurred.

Working (2.0.0-rc27): https://jsfiddle.net/utg8pf0e/1/
Bugged (2.0.0): https://jsfiddle.net/8g7c7oob/

It almost seems as if the validation is running twice after 2.0.0, and the second time, it uses the previous value of that input. If you check the console on the two fiddles below, you will see that when you type into the input field, the custom validation rule fires twice on 2.0.0, with the second one being the old value.

Custom Validation (2.0.0-rc27) - https://jsfiddle.net/t8s51Lp6/
Custom Validation (2.0.0) - https://jsfiddle.net/bprh043y/

[bobrosset]

Thanks @dcdrawk, good catch! hopefully this can be fixed on future iterations. I'll be waiting for that update!

[william-pan]

Commenting out (or removing) this._addHTMLEventListener(e, validate); in "src/core/field.js" maybe a workaround.
The code was introduced in this commit

[logaretm]

@dcdrawk Thanks for the catch, this was indeed a bug but it doesn't look like its related to @bobrosset issue here, I applied the fix in a recent commit. Will check other causes for this issue. If @bobrosset can confirm the latest commit fixes the issue that would be great.

[bobrosset]

I revert my code to the version @dcdrawk mentioned. And I'm doing a release to staging this weekend, I'll check it locally next week.

It's true that that version (rc27) works as expected. So whatever happened between that and 2.0.6 might caused the issue. I know. It's very vague.

[Kleemer]

Any update on this ? Just wondering because I had this weird bug too.

[bobrosset]

@Kleemer, what I did to bypass that was to install an specific version (rc27). I'm not sure if this issue was fixed on future versions (if there's any). But installing that should be good enough to avoid the issue we had before. Hope that helps and sorry for the late response.

[dwonisch]

Fixed for me in 2.0.9. https://jsfiddle.net/8g7c7oob/

Thank you

[PurnimaSankhwar]

it is a workaround- you can delay the error message to 1 sec, and it realizes its mistake:P