CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
nickycdk
nickycdk

Reputation: 107

Vee validate return true, but should return false

Im using Vuetify, and have a form where im using VeeValidate for form validation... When im using this: 

this.$validator.validateAll().then((result) => {
            console.log("result form", result);
            //result ? this.onSubmit() : scrollTo(0, 250);
        });

It always returns true, even if the validation on my input field isn't valid... The input looks like: 

<v-textarea
    filled
    name="string"
    :label="placeholderText"
    auto-grow
    single-line
    :placeholder="placeholderText"
    v-model="answer"
    :required="isRequired"
    v-validate:computedProp="checkRequired"
    :error-messages="errors.collect('string')"
    data-vv-name="string"
    :hint="hintText"
    @blur="updateAnswer"
></v-textarea>

The code for the input component:

export default {
$_veeValidate: {
    validator: 'new'
},
name: 'String',
props: {
    placeholderText: {
        default: 'Add a value'
    },
    hintText: {
        default: 'Add a value'
    },
    isRequired: {
        default: true
    }
},
data: () => ({
    answer: ''
}),
computed: {
    checkRequired() {
        return this.isRequired ? 'required' : ''
    }
},
methods: {
    updateAnswer() {
        this.$validator.validateAll();
        this.$emit('updateAnswer', this.answer);
    }
}

}

Im calling this.$validator.validateAll() in another component... The input component is a standalone component... I have it all wrappet in a form tag, and running the validate function on a submit

Upvotes: 2

Views: 2865

Answers (1)

Max
Max

Reputation: 7100

You have two choice:

  1. Pass to the component the v-validate from the $attrs

  2. Inject the $validator to the component

Parent

export default {
  name: "App",
  components: {
    YourComponent
  },
  provide() {
    return {
      $validator: this.$validator
    };
  },

Child

 $_veeValidate: {
    validator: "new"
  },
  inject: ["$validator"],
  name: "String",

You can also simplify your html code, see the VeeValidate Syntax

Html

v-validate="{ required: this.isRequired }"

And you can safely remove

:required="isRequired"

Upvotes: 1

Related Questions