With VeeValidate, how can I see if a field has been touched and is valid?

user_239879 0
Viewed 3916

I'm trying to access the validation flags from a computed prop:

computed: {
  isFormValid() {
    let isValid = this.$validator.fields.some(field => {
      console.log(field.flags);
      return field.flags.touched; || field.flags.invalid;
    });
    console.log("isValid", isValid);
    return isValid;
  }
},

But this gives an error: "TypeError: this.$validator.fields.some is not a function"

So then I figured I would iterate over the observable:

let isValid = Array.from(this.$validator.fields).some(field => {
  console.log(field.flags);
  return field.flags.touched; //|| field.flags.invalid;
});

Yay! Progress! No more error. But it doesn't recompute when I change the form input values.

So how can I do this?

vee-validate vuejs2 vue.js javascript
1 Answers

The v2 docs show an example that iterates this.fields (instead of this.$validator.fields) via Object.keys:

// MyComponent.vue
export default {
  // ...
  computed: {
    isFormDirty() {
      return Object.keys(this.fields).some(key => this.fields[key].dirty);
    }
  },
  //...
}

Using that example, your computed prop would be:

// MyComponent.vue
export default {
  // ...
  computed: {
    isFormTouchedOrInvalid() {
      return Object.keys(this.fields).some(key => this.fields[key].touched || this.fields[key].invalid);
    }
  },
  //...
}

v2 demo

In v3, you could use the <ValidationProvider> component to easily access the validation flags in the template:

<ValidationProvider rules="required" v-slot="{ touched, invalid }">
  <pre>touched:{{touched}} invalid:{{invalid}}</pre>
  <input type="email" v-model="value">
</ValidationProvider>

v3 demo

user_62771510
Related