Form validation is a feature that’s not built into Vue.js.
However, we still need this feature very much.
In this article, we’ll look at how to add localization features with Vee-Validate.
Localization
We can add localization features with Vee-Validate.
This way, we can display different messages for validation in different languages.
For instance, we can import the localize function by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import { localize, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
localize({
en: {
messages: {
required: "this field is required"
}
}
});
extend("required", required);
Vue.component("ValidationProvider", ValidationProvider);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
Then we can display the message by writing:
<template>
<div id="app">
<ValidationProvider name="email" rules="required" v-slot="{ errors }">
<input v-model="email" type="text" placeholder="email">
<span>{{ errors[0] }}</span>
</ValidationProvider>
<input type="submit" value="submit">
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
email: ""
};
}
};
</script>
We’ll see the ‘this field is required’ message is we entered nothing into the field.
Installing Locales
Vee-Validate comes with locale data built-in.
For example, we can write:
import Vue from "vue";
import App from "./App.vue";
import { localize, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
import en from "vee-validate/dist/locale/en.json";
import fr from "vee-validate/dist/locale/fr.json";
localize({
en,
fr
});
localize("fr");
extend("required", required);
Vue.component("ValidationProvider", ValidationProvider);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
Then we imported the English and French locales.
We can set the locale by using the localize method.
For example, we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import { localize, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
import en from "vee-validate/dist/locale/en.json";
import fr from "vee-validate/dist/locale/fr.json";
localize({
en,
fr
});
localize("fr");
extend("required", required);
Vue.component("ValidationProvider", ValidationProvider);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
Then we can write:
App.vue :
<template>
<div id="app">
<ValidationProvider name="email" rules="required" v-slot="{ errors }">
<input v-model="email" type="text" placeholder="email">
<span>{{ errors[0] }}</span>
</ValidationProvider>
<input type="submit" value="submit">
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
email: ""
};
}
};
</script>
in our component and we’ll see a French validation message instead of an English one.
The is because we have:
localize("fr");
in main.js .
Localized Field Names
We can add field names by passing in an object to the localize method.
For example, we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import { localize, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
localize({
en: {
names: {
name: "name"
}
},
fr: {
names: {
name: "nom"
}
}
});
localize("fr");
extend("required", required);
Vue.component("ValidationProvider", ValidationProvider);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
We passed in an object to localize with the locale name as the key.
The names property is in each object.
Then we have the field names for each locale inside names .
Then we can write:
App.vue
<template>
<div id="app">
<ValidationProvider name="name" rules="required" v-slot="{ errors }">
<input v-model="name" type="text" placeholder="name">
<span>{{ errors[0] }}</span>
</ValidationProvider>
<input type="submit" value="submit">
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
name: ""
};
}
};
</script>
Then we see ‘nom is not valid’ instead of ‘name is not valid’ because we set the locale to fr by writing:
localize("fr");
Custom Messages Per Field
We can add custom validation messages per field.
For instance, we can write:
import Vue from "vue";
import App from "./App.vue";
import { localize, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
localize({
en: {
names: {
name: "name"
}
},
fr: {
names: {
name: "nom"
},
fields: {
name: { required: "Le nom est requis" }
}
}
});
localize("fr");
extend("required", required);
Vue.component("ValidationProvider", ValidationProvider);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
Then if we have the same code in App.vue , we have ‘Le nom est requis’ instead of an English message.
Conclusion
We can localize the validation messages in our code with Vee-Validate.
To do that, we can use the localize function that comes with Vee-Validate.
We can use the built-in messages or add our own messages.
