Vuetify Async Validation

A plugin for Vuetify 2.x async validation.

Installation

• If you're using yarn: yarn add vuetify-async-validation
• If you're using npm: npm install vuetify-async-validation --save

Demo

See live demo on CodeSandbox.

Usage

1. Import and use the plugin

import Vue from "vue";
import App from "./App.vue";
import VuetifyAsyncValidation from "vuetify-async-validation";

Vue.use(VuetifyAsyncValidation);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

If you want to split the plugin import into another file like VueCLI has done for you during the installation of Vuetify, you may also import VuetifyAsyncValidation together.

import Vue from "vue";
import Vuetify from "vuetify";
import VuetifyAsyncValidation from "vuetify-async-validation";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);
Vue.use(VuetifyAsyncValidation);

export default new Vuetify({});

2. Modify <v-form> element

Add "v-async-form" directive on <v-form> element in template

<v-form v-async-form ref="formRef" @submit.prevent="handleFormSubmit"></v-form>

3. Modify input element

1. Add "v-async-validate" directive on any input element provided by Vuetify that you want to validate asynchronously. For example, <v-text-field>
2. Change property "v-bind:rules" to "v-bind:async-rules" (although it is called async-rules, you can still use sync rules in the array)

<v-form v-async-form ref="formRef" @submit.prevent="handleFormSubmit">
  <v-text-field
    v-async-validate
    v-model="email"
    label="Email"
    :async-rules="$_rules.email"
  >
  </v-text-field>
</v-form>

4. Modify form submit method

Change the form submit method to async, and call validateAsync() instead of validate().

export default {
  // ...
  methods: {
    async handleFormSubmit() {
      const isValid = await this.$refs.formRef.validateAsync();
      if (!isValid) {
        return;
      }
      /**
       * All inputs in the form are validated.
       * You can use those data to do other stuff here.
       */
       console.log("Validated.");
    }
  },

5. Try it

Your async validation logic should work now.

6. Suggestions

Due to the fact that the validate method is now asynchronous, we probably don't want the user to click submit button multiple times before the previous validation process is done. It is recommended to disable the form and the submit-button during validation. You can look into the demo above for sample code.

Customization

Since the async validation usually means we are calling APIs to do some check, it would be great to use debounce function here. The default debounce interval is 0, which means no debouncing at all. The plugin provides 2 ways to add debouncing mechanism.

1. Globally

You can achieve this by passing an object as the second argument while Vue.use(VuetifyAsyncValidation).

Vue.use(VuetifyAsyncValidation, {
  debounceInterval: 1000, // ms
});

2. For individual input

You can also set the debounce interval for individual input by using the "debounce" argument on "v-async-validate" directive.

<v-text-field
  v-async-validate:debounce="1000"
  v-model="email"
  label="Email"
  :rules="$_rules.email"
>
</v-text-field>

The plugin will read individual value first if both values are applied.