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

admin管理员组

文章数量:1425662

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

puted: {
  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 repute when I change the form input values.

So how can I do this?

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

puted: {
  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 repute when I change the form input values.

So how can I do this?

• javascript
• vue.js
• vuejs2
• vee-validate

Share Improve this question Follow edited Oct 7, 2019 at 6:36 tony19 139k2323 gold badges278278 silver badges348348 bronze badges asked Oct 1, 2019 at 13:14 ShamoonShamoon 43.7k101101 gold badges332332 silver badges628628 bronze badges 2

• I suggest you go throught this topic on official web site - logaretm.github.io/vee-validate/guide/…. I believe it will answer on all your questions – Pobepto Commented Oct 4, 2019 at 19:45
• I did. That’s how I came up with what I did. Problem is that it’s not working. – Shamoon Commented Oct 5, 2019 at 2:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4 +50

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

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

Using that example, your puted prop would be:

// MyComponent.vue
export default {
  // ...
  puted: {
    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> ponent 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

本文标签：