Hey everyone,
This is a quick post to show how you can add a custom error message when using Vuelidate in Vue3. In my case I have a price field that should not be greater than $1000. The issue is that I store the amount in cents which results in the following error:
This is obviously a little ambiguous to the user who isn’t aware that everything is running in cents behind the scenes. In order to avoid the issue I used a helper in @vuelidate/validates:
// Import the following in your component
import {
required,
maxValue,
helpers, // Helpers provides access to the message customisation
} from "@vuelidate/validators";
...
// Add the following validation rule
priceInCents: {
required,
maxValue: helpers.withMessage("Price cannot be more than $1000.00" , maxValue(100000)),
},
With the new rule in place the error is much more useful:
While it doesn’t seem to show up on Google too well this functionality is documented by Vuelidate on the following page: https://vuelidate-next.netlify.app/custom_validators.html#custom-error-messages