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
- Add "v-async-validate" directive on any input element provided by Vuetify that you want to validate asynchronously. For example, <v-text-field>
- 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.