Menu
When VeeValidate picks up an invalid field it outputs an error using the fields name, eg.
The address_line_1 field is required.
Is it possible to use a fields label or some other attribute in the error message, as field names are not always user friendly?
493
When the field under validation is not required, your rule may not be executed at all. This is because VeeValidate skips validation for empty fields if they are not required. You can override this behavior by using v-validate.continues modifier to force all rules to run.
You can easily add custom rules to VeeValidate, but your custom rules must adhere to a contract or certain structure: This is the most basic custom validator form. It consists of only a function that returns either a Boolean or a promise. However, it will have a default error message.
Install the Vee Validate library: After installation, create an empty folder plugin in the src folder to set up the validator. In the folder created, add a new file: We are importing and registering the components from the vee-validate library, giving them aliases so as not to collide with HTML elements.
For validation providers the target field must have a vid prop set instead of the ref. If you need to define a rule that declares a field as required under specific conditions, you will need to enable the computesRequired option. Because, by default, VeeValidate doesn't validate non require-like rules if the field has no value.
For VeeValidate v3 you can pass name attribute for the ValidationProvider
<ValidationProvider name="first name" rules="required|min:2" v-slot="{ errors }">
You can use data-vv-as which will show in the error message. Read more here.
<input type="text" name="address_line_1" data-vv-as="Address Line 1" />
EDIT: Updated documentation reference here.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
