Custom Component Validation - Working but with an offset.

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.

[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]

@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.