Vuetify how can I disable button till all validation rules are true?

Question

I am using Vuetify to create a simple form where the data is being validated by some rules associated with each field. What I am trying to do is disable the Submit button if any of those validation rules fails. How can I do so? What I am trying to understand is how to check the state of each rule so that I can bind the disabled property on the button.

<template>
  <v-card>
    <v-card-text>
      <v-combobox
        v-model="addTool.name"
        :rules="rules.name"
        :items="toolNames"
        counter
        label="Name of the tool"
      ></v-combobox>
      <v-combobox
        multiple
        :small-chips="true"
        :deletable-chips="true"
        :hide-selected="true"
        :clearable="true"
        v-model="addTool.categories"
        :rules="rules.categories"
        label="Select/Add categories"
        :items="this.toolCategories"
        :search-input.sync="searchCat"
        @change="searchCat = ''"
      ></v-combobox>
      <v-text-field
        v-model="addTool.site"
        label="URL for the tool. It is best to use a Github repo link."
        :rules="rules.site"
      ></v-text-field>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn @click="submit" color="grey darken-4" class="green--text text--accent-2" dark>Add</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
      searchCat: "",
      addToolMessage: undefined,
      addTool: {
        name: "",
        categories: [],
        created_on: "",
        site: ""
      },
      rules: {
        name: [
          v => !!v || "Required.",
          v => v.length < 80 || "Name is too long",
          v =>
            !this.toolsData
              .map(n => n.name.toLowerCase())
              .includes(v.toLowerCase()) || "This tool already exists"
        ],
        categories: [v => v.length != 0 || "At least one category is needed"],
        site: [
          v => !!v || "Required.",
          v =>
            new RegExp(
              "^(?:(?:https?|ftp)://)(?:S+(?::S*)?@)?(?:(?!(?:10|127)(?:.d{1,3}){3})(?!(?:169.254|192.168)(?:.d{1,3}){2})(?!172.(?:1[6-9]|2d|3[0-1])(?:.d{1,3}){2})(?:[1-9]d?|1dd|2[01]d|22[0-3])(?:.(?:1?d{1,2}|2[0-4]d|25[0-5])){2}(?:.(?:[1-9]d?|1dd|2[0-4]d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:.(?:[a-z\u00a1-\uffff]{2,})).?)(?::d{2,5})?(?:[/?#]S*)?$",
              "ig"
            ).test(v) || "Not a valid URL",
          v =>
            !this.toolsData.map(u => u.site).includes(v) ||
            "This tool already exists"
        ]
      }
    };
  }
};
</script>

A silly mistake, but I've had `v-bind` instead of `v-model` on ... I made the mistake while migrating from `Vue2`/`Nuxt2`/`Vuetify2` to `Vue2`/`Nuxt2`/`Vuetify2`, because `v-hover` now wants `v-bind` on nested `v-card`, which wasn't the case before, and I must have been automatically changed it in `v-form` as well in the massive migration. Maybe it'll help somebody, adding just as a comment :) — Daniel Danielecki, Jun 20 '23 at 05:19

Manish · Accepted Answer · 2020-10-27T09:39:30.803

53

Vuetify will track the validity of form if you wrap input elements in v-form and then attach v-model to form like this:

<v-form v-model="isFormValid">
  <!-- all input elements go here -->
</v-form>

<!-- disable if form is not valid -->
<v-btn :disabled="!isFormValid">Add</v-btn>

You also need to add isFormValid to the component's data field:

data: () => ({
  isFormValid: false,
})

You can read more here: https://vuetifyjs.com/en/components/forms

edited Oct 27 '20 at 09:39

answered Sep 06 '19 at 19:41

Manish

4,903
1
29
39

2

but how do i map isFormValid to the rules array is the question – securisec Sep 06 '19 at 20:12
2

You don't have to. `isFormValid` has its value set by vuetify, to true, when all validation rules return true. – Manish Sep 07 '19 at 04:00
@ManishRaj This works! But I couldn't find this in the docs, where is it? – therealak12 Aug 05 '20 at 08:25
2

But by default Submit button is enabled until you click on some field to verify. By default Submit should be disabled. – Nimish May 03 '21 at 10:24

Matheus Valenza · Answer 2 · 2019-09-06T19:31:47.083

1

You can create a computed property do to it. Lets say name and site are requireds, so:

<temlate>
  <v-btn :disabled="isAddButtonDisabled" @click="submit" color="grey darken-4" class="green--text text--accent-2" dark>Add</v-btn>
</template>

<script>
export default {
  data() {
    return {
      addTool: {
        name: "",
        categories: [],
        created_on: "",
        site: ""
      },
    };
  },
  computed: {
    isAddButtonDisabled() {
      return !(this.addTool.name || this.addTool.site);
      // means u have neither name nor site  
    },
  },
};
</script>

If you need to check if form is valid, you can do:

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

From here: https://github.com/logaretm/vee-validate/issues/853

edited Sep 06 '19 at 19:31

answered Sep 05 '19 at 18:26

Matheus Valenza

889
1
5
11

Thank you, but unfortunately, your solution doesnt answer my question. In your solution, the isAddButtonDisabled will return true as long as there is data in those properties. Not check if they are validated or not. – securisec Sep 06 '19 at 19:08
Sorry! Edited my answer – Matheus Valenza Sep 06 '19 at 19:32
ah, the question is how to map this to the array of validating functions. There is not valid property in the data structure as you can see – securisec Sep 06 '19 at 20:13
in this case you can check `this.errors.count() > 0` – Matheus Valenza Sep 06 '19 at 20:40

Vuetify how can I disable button till all validation rules are true?

2 Answers2

Linked