How can I display error message that is relevant to the error in vee-validate. I have a number input and I validate it for required and numeric like so:
<ValidationObserver :name="'age'">
<div class="flex flex-col items-center">
<h3 class="nunito text-2xl">Wpisz swój rok urodzenia</h3>
<form class="" @submit.prevent="handleSubmit(onSubmit('alko'))">
<label for="age" class="hidden">Wpisz swój rok urodzenia</label>
<ValidationProvider
v-slot="{ errors }"
mode="eager"
rules="numeric|required"
:bails="false"
>
<input
id="age"
type="number"
placeholder="1992"
v-model="ageInput"
name="age"
data-vv-scope="alko"
class="k-border p-4 text-center h-20 w-44 text-xl nunito my-6"
/>
<div class="text-red-500 text-center nunito text-xs">
{{ errors[0] }}
</div>
</ValidationProvider>
</form>
</div>
</ValidationObserver>
<script>
import { ValidationProvider, ValidationObserver, extend } from "vee-validate";
import { numeric, required } from "vee-validate/dist/rules";
export default {
name: "AgeVerificationXs",
components: {
ValidationProvider,
ValidationObserver,
},
data() {
return {
showAlko: true,
ageInput: "",
};
},
methods: {
onSubmit(data) {
console.log(data);
},
},
created() {
extend("required", {
...required,
message: "To pole jest wymagane",
});
extend("numeric", {
...numeric,
message: "To pole może zawierać tylko cyfry",
});
},
};
</script>
The thing is that when I enter non-numeric characters on Firefox (on chrome they're disabled by default in fields type number) the message I get is that this field is required, the thing is the field was filled and the rule that should be applied is "numeric" I display errors[0] (accordingly to the docs and every single example I have found) but I need to display error message relevant to the error. How can I do that? Appreciate any help. Thanks.
I believe the problem is that you have your "required" and "numeric" rules in the created() lifecycle hook. You need to move them up out of export default {} and the created() lifecycle hook and below where you are importing them, like this:
import { numeric, required } from "vee-validate/dist/rules";
extend("required", {
...required,
message: "To pole jest wymagane",
});
extend("numeric", {
...numeric,
message: "To pole może zawierać tylko cyfry",
});