CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
vinieth
vinieth

Reputation: 1314

Validate vuetify textfield only on submit

temp.vue

<v-form ref="entryForm" @submit.prevent="save">
  <v-text-field label="Amount" :rules="numberRule"r></v-text-field>
  <v-btn type="submit">Save</v-btn>
</v-form>

<script>
export default {

   data: () => ({
     numberRule: [
       v => !!v || 'Field is required',
       v => /^\d+$/.test(v) || 'Must be a number',
     ],
   }),

   methods: save () {
     if (this.$refs.entryForm.validate()){
       //other codes
     }
   }
}
</script>

enter image description here

What happens here is while typing in the text field itself the rule gets executed. I want to execute the rule only on submit. How to do that in vuetify text field?

Upvotes: 23

Views: 28424

Answers (3)

dotNET
dotNET

Reputation: 35400

If you're like me and just want to prevent validation from running on every key stroke, apply validate-on-blur prop on your text fields and now validation will only be perform after user has completed typing the whole input.

So not an exact answer to the OP, but I think this is what most of us want to achieve. This prop has been documented here.

Update 2024

Vuetify 3 introduces validate-on property that accepts several values including blur, so the correct syntax for Vuetify 3 users is validate-on="blur". Thanks @epeleg.

Upvotes: 17

ezragul
ezragul

Reputation: 21

I have another way to solve this problem without setting up watchers:

<v-form lazy-validation v-model="valid" ref="form">
  <v-text-field
   class="w-100"
   light
   label="Nome"
   v-model="form.nome"
   :rules="[rules.required]"
   rounded
   required
   outlined
   hide-details="auto"
  ></v-text-field>
  <v-btn
   rounded
   height="50"
   width="200"
   :disabled="!valid"
   :loading="isLoading"
   class="bg-btn-secondary-gradient text-h6 white--text"
   @click="submitContactForm()"
  >
   Enviar
  </v-btn>
</v-form>

There is a prop called lazy-validation on vuetify, as you can see on the docs: https://vuetifyjs.com/en/api/v-form/#functions

So, the v-form has a method that you can see through $refs called validate(), and it can return true or false, based on your form rules.

And, the function that will trigger the validation on submit will be like this:

submitContactForm() {
  const isValid = this.$refs.form.validate();
  if (isValid) {
    alert("Obrigado pelo contato, sua mensagem foi enviada com sucesso!");
    this.form = {
      nome: "",
      celular: "",
      email: "",
      mensagem: ""
    };
    this.$refs.form.resetValidation(); // Note that v-form also has another function called resetValidation(), so after we empty our fields, it won't show the validation errors again.
  }
},

Upvotes: -1

Subash
Subash

Reputation: 816

Vuetify rules are executed when the input gets value, But if you want that to happen only on the form submit, you have remodified the rules that are being bound to that input,

Initially, rules should be an empty array, when you click on the button you can dynamically add/remove the rules as you wanted, like this in codepen

CODEPEN

<div id="app">
  <v-app id="inspire">
    <v-form ref="entryForm" @submit.prevent="submitHandler">
      <v-container>
        <v-row>
          <v-col
            cols="12"
            md="6"
          >
            <v-text-field
              v-model="user.number"
              :rules="numberRules"
              label="Number"
              required
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-btn type="submit" color="success">Submit</v-btn>
          </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    valid: false,
    firstname: '',
    user: {
      number: ''
    },
    numberRules: []
  }),
  watch: {
    'user.number' (val) {
      this.numberRules = []
    }
  },
  methods: {
    submitHandler () {
      this.numberRules = [
        v => !!v || 'Field is required',
        v => /^\d+$/.test(v) || 'Must be a number',
      ]
      let self = this
      setTimeout(function () {
        if (self.$refs.entryForm.validate()){
         //other codes
          alert('submitted')
        }  
      })

    }
  }
})

Upvotes: 20

Related Questions