A plugin for Vuetify 2.x async validation.
- If you're using yarn:
yarn add vuetify-async-validation
- If you're using npm:
npm install vuetify-async-validation --save
See live demo on CodeSandbox.
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({});
Add "v-async-form" directive on <v-form> element in template
<v-form v-async-form ref="formRef" @submit.prevent="handleFormSubmit"></v-form>
- 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>
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.");
}
},
Your async validation logic should work now.
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.
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.
You can achieve this by passing an object as the second argument while Vue.use(VuetifyAsyncValidation)
.
Vue.use(VuetifyAsyncValidation, {
debounceInterval: 1000, // ms
});
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.