Vuetify Reset Form Validation:Vuetify is a popular Vue.js UI library that provides pre-built components to develop responsive and attractive web applications. In Vuetify, form validation is a built-in feature that helps to ensure the user inputs are valid before submitting. To reset form validation in Vuetify, the v-form component provides a reset method that clears all the errors and resets the form data to its initial state. This can be useful when the user wants to start over the form filling process without seeing the previous error messages. The reset method can be called on any event like a button click or form submission.

How do you reset form validation in Vuetify?

In the provided code, the Vuetify form validation can be reset by calling the resetValidation() method on the form reference. This method will clear any validation errors and reset the validation state of all fields in the form. In the resetForm() method, this is achieved by calling this.$refs.form.resetValidation(). This allows the user to reset the form validation and start again without having to manually clear the validation errors. The submitForm() method also uses the form reference to validate the form using the validate() method, which returns an object with a valid property indicating whether the form is valid or not.

Vuetify Reset Form Validation Example

<v-form ref="form" v-model="valid">
     <v-text-field v-model="name" :rules="[rules.required]" label="Name"></v-text-field>
     <v-text-field v-model="email" :rules="[rules.required, rules.email]" label="Email"></v-text-field>
     <v-btn @click="submitForm" class="ma-2">Submit</v-btn>
     <v-btn @click="resetForm" class="ma-2">Reset Validation</v-btn>
</v-form>
<script type="module">
        const { createApp } = Vue
        const { createVuetify } = Vuetify
        const vuetify = createVuetify()
        const app = createApp({
            data() {
                return {
                    name: '',
                    email: '',
                    valid: true,
                    rules: {
                        required: (value) => !!value || 'Required.',
                        email: (value) => /.+@.+\..+/.test(value) || 'Invalid email address.',
                    },
                };
            },
            methods: {
                async submitForm() {
                    const { valid } = await this.$refs.form.validate()
                    if (valid) alert('Form is valid')
                },
                resetForm() {
                    this.$refs.form.resetValidation()
                },
            },
        }).use(vuetify).mount('#app'); // Mount the app to the #app element
 </script>

Output of Vuetify Reset Form Validation