Is there a way to determine if a field has been interacted with and meets validation criteria using VeeValidate?

Question

Is there a way to determine if a field has been interacted with and meets validation criteria using VeeValidate?

I'm attempting to retrieve the validation flags from a computed property:

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;
  }
},

However, I encountered an error stating:

"TypeError: this.$validator.fields.some is not a function"

To address this issue, I decided to iterate over the observable:

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

Success! The error has been resolved. Yet, it doesn't update when I modify the form input values.

So, how can I tackle this challenge?

javascript vue.js vuejs2 vee-validate

Answer 1

Answer №1

An example in the v2 documentation illustrates iterating through this.fields (rather than this.$validator.fields) using Object.keys:

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

By following this example, your computed property would be:

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

To see a demo of v2 implementation

In v3, you can easily access validation flags using the <ValidationProvider> component within the template:

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

Check out the v3 demo here

Answer 2

An example in the v2 documentation illustrates iterating through this.fields (rather than this.$validator.fields) using Object.keys:

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

By following this example, your computed property would be:

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

To see a demo of v2 implementation

In v3, you can easily access validation flags using the <ValidationProvider> component within the template:

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

Check out the v3 demo here

Is there a way to determine if a field has been interacted with and meets validation criteria using VeeValidate?

Answer №1

Similar questions

What steps should I take to show a particular set of data upon selecting a checkbox component?

Tips for ensuring nvm is activated whenever the nvmrc file is updated

How can I implement a personalized Transformer in Gridsome?

Tips for converting an object into parameters for ng-include

Is it possible to activate the jQuery .click() function for a button with specific text?

Combine filter browsing with pagination functionality

How can I extract several values from a child component in React?

What is the right way to utilize Fetch in JavaScript and Django?

Ways to utilize ng-options for looping through an array inside an object?

What is the method for utilizing tsx within the Vue Composition setup function?

Leverage promises to alter reactive data, strategically placing them to minimize the frequency of triggers being activated

Is my implementation of Model and Views in backbone.js accurate?

Struggling to pass command line arguments to index.ts with yarn?

Guide on retrieving the response headers with jQuery and AJAX

JavaScript tabs that smoothly fade in and out

Tips for updating model data when integrating jQuery Data tables with ASP.NET MVC

Are there any find all functions available in JavaScript that are built-in?

JavaScript will continue to run uninterrupted even after refreshing the webpage

Nuxt Js - Ensuring script is only loaded once during the initial page load

Innovative HTML5 Video Canvas Shapes