Vee-validate: How to check if all form fields are valid?

[ottz0]

Sorry not an issue. Is there forum support for vee-validate?

How can I check if all form fields are valid?

At the moment I am doing some thing like this (long chaining)...

if(this.email.valid && this.name.valid && this.comments.valid && this.password.valid)

then..disable Button = true

[logaretm]

Its okay, you can ask questions here 😄

You can created a computed property to help you:

export default {
  computed: {
    formValid () {
      // loop over all contents of the fields object and check if they exist and valid.
      return Object.keys(this.fields).every(field => {
        return this.fields[field] && this.fields[field].valid;
      });
    }
  }
}

[juniorgarcia]

To check if all fields are valid I do it this way:

this.errors.items.length <= 0; // Where this, is the Vue instance.

The errors variable is injected into your Vue instance with the information about all the items with validation problems.

[GreggOrdHume]

I found this method useful after a good few others failed.

<form method="post" v-on:submit="sendAccounts">
    <div class="accounts_create_row" v-for="(acc,key,index) in accounts">
        <div class="form-group" v-bind:class="{ 'is-danger': errors.has(acc.account_number__c) }">
            <input 
                type="text" 
                v-bind:name="acc.account_number__c" 
                v-model="accounts[acc.account_number__c].balance"
                v-validate="'required|numeric'" 
                class="form-control"
                placeholder="150,000" 
            >
            <div class="invalid-feedback">Not good!</div>
        </div>
    </div>
    <button type="submit" class="btn--border">Sends Accounts</button>
</form>

methods:{
    sendAccounts: function(e){
        e.preventDefault();

        this.$validator.validateAll().then((result) => {
          if (result) {
                    // do axois or whatever on validate true
            console.log('All is well');
            return;
          }
                  if(!result){
                console.log('Oops!');                
                  }
        });
    }
}

[binhphanduc]

Can we know which fields is failed after calling validateAll ?

[binhphanduc]

Sorry all, I found it in this $validator.errorBag.

[sayhicoelho]

To check if the form is completely valid, just do:

computed: {
  isFormValid () {
    return !Object.keys(this.fields).some(key => this.fields[key].invalid)
  }
},

To disable the submit button, you may try:

<button type="submit" :disabled="!isFormValid">
  Submit
</button>

It worked for me like a charm!

[ThPadelis]

This code doesn't work if you have data with null value