CODEWITHSUNDEEP
vuetify.jsvee-validate
User_4373
User_4373

Reputation: 297

Vee-Validate with scope not working on vuetify

I have been trying to use vee-validate with scope on Veutify form. But when the form is submitted it doesn't show any error or the form is always valid.

I think i miss something on my implementation.

Please help.

<div id="app">
  <v-app id="inspire">
    <form  data-vv-scope="form1">
      <v-text-field
        v-model="name"
        label="Name"
        :counter="10"
        :error-messages="errors.collect('form1.name')"
        v-validate="'required|max:10'"
        data-vv-name="name"
        required
      ></v-text-field>
      <v-btn @click.native="submit('form1')">submit</v-btn>
      <v-btn @click="clear">clear</v-btn>
    </form>
  </v-app>
</div>

Submit Method:

submit(scope) {
  alert("submit");
  this.$validator.validateAll(scope).then(result => {
    if (result) {
    }
  });
}

Sample Code

Upvotes: 4

Views: 1764

Answers (2)

Yaw
Yaw

Reputation: 1

I think you should use validator.validate('scope.*') instead of $validator.validateAll('scope');

you may refer to this link https://vee-validate.logaretm.com/v2/api/validator.html#methods

Upvotes: 0

Regis Chow
Regis Chow

Reputation: 11

It is not inherently obvious from the documentation, https://baianat.github.io/vee-validate/examples/scopes.html, or from the examples provided, https://codesandbox.io/s/y3504yr0l1?from-embed, especially when using within Vuetify.

When you define data-vv-name it needs to be prefixed with the scope.

data-vv-name="form1.name"

Upvotes: 1

Related Questions