VeeValidate fastExit with multple error not working

Question

I am using Veevalidate version 2. The documentation is either broken or not useful. I am trying to use multiple errors on the field but it only displays one. What am I missing? Here is my code:

Vue.use(VeeValidate, {
    fastExit: false
});

Validator.extend("number", {
    getMessage: (field) =>
        "Error 1",
    validate: (value) => {
        if (/^[^-][0-9]+|[.][0-9]+/) {
            return true;
        } else {
            return false;
        }
    },
});
Validator.extend("number2", {
    getMessage: (field) =>
        "The field is required",
    validate: (value) => {
        if (value == '') {
            return false;
        } else {
            return true;
        }
    },
});

    <input
      class="ff"
      v-validate="'number|number2|required'"
      v-model="application.number"
    />
  </div>
  <span v-show="errors.has('number')" class="error">
    {{
    errors.first("number")
    }}
  </span>
  <span v-show="errors.has('number2')" class="error">
    {{
    errors.first("number2")
    }}
  </span>

@Nofel Which error is displayed? Is it always number or number2 or random? — Utsav Patel
Yes but you said there is only one error showing. And there is the v-show on number2. So my question is are you sure, the number2 error should be displayed? Is there an error for number2 in Veevalidates error bag? — Adam Orłowski
@UtsavPatel it keep picking on old error message of number it is like it is ignoring number2 and keeping old copy of number error message even after I comment it out — localhost

Denis Tsoi Denis Tsoi · Accepted Answer · 2020-05-06T10:37:57

TLDR: codesandbox example

According to the docs you can display multiple errors with errors.collect

<ul>
  <li v-for="error in errors.collect('fieldName')">{{ error }}</li>
</ul>

In your example - the validation for number1 is incorrect, you'd need something like if (value.match(<regex>))

main.js

import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
import App from "./App.vue";

Vue.use(VeeValidate, {
  fastExit: false
});

Validator.extend("shouldBeNumber", {
  getMessage: field => "Should be a number",
  validate: value => {
    if (value.match(/^[a-z]+/)) {
      return false;
    } else if (value.match(/^[0-9]+/)) {
      return true;
    }
  }
});

Validator.extend("shouldBeLongerThan3", {
  getMessage: field => "Field should be longer than 3 numbers",
  validate: value => {
    if (value.length < 3) {
      return false;
    } else {
      return true;
    }
  }
});

Validator.extend("shouldNotIncludeSymbols", {
  getMessage: field => "Should not include symbols",
  validate: value => {
    if (value.match(/[^\w\s]+/)) {
      return false;
    } else {
      return true;
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <input
      class="ff"
      v-validate="'shouldBeNumber|shouldBeLongerThan3|shouldNotIncludeSymbols|required'"
      name="number"
      v-model="number"
    >
    <span v-bind:key="index" v-for="(error, index) in errors.collect('number')">{{ error }}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      number: null
    };
  }
};
</script>

<style lang="scss" scoped>
.fieldset {
  margin-bottom: 10px;
  border: 0;
}
</style>

VeeValidate fastExit with multple error not working

1 Answers

main.js

App.vue