How do I change the "name" that is shown on validation errors. I know I can adjust it with the property "name" but I want to leave it the way it is to match it with validation errors from the backend. I do not want to change the attribute name in the backend to something descriptive. For users´ better understanding I want to use a more descriptive name on frontend errors.
I use Boostrap-Vue, Laravel 6 and VeeValidate 3. This is the code I use right now. So instead of having "url is a required field." I want to show e.g. "Link is a required field" without changing the name attribute.
<validation-observer ref="observer" v-slot="{ passes }">
<b-form @submit.stop.prevent="passes(onSubmit)">
<b-row>
<b-col sm="2" lg="3">
<label for="url">{{ $t('channel.label_create_url') }}</label>
</b-col>
<b-col sm="10" lg="9">
<validation-provider
name="url"
:rules="{ required: true, min: 11, regex: /^(http:\/\/|https:\/\/)?[a-z0-9]+([\-.]{1}[a-z0-9]+)*\.[a-z]{2,}(:[0-9]{1,5})?(\/.*)?$/ }"
v-slot="validationContext"
>
<b-input
v-model="form.url"
:placeholder="$t('channel.placeholder_create_url')"
type="url"
size="lg"
name="url"
id="url"
required
autofocus
:state="getValidationState(validationContext)"
aria-describedby="input-url-live-feedback"
></b-input>
<b-form-invalid-feedback
id="input-url-live-feedback">{{ validationContext.errors[0] }}
</b-form-invalid-feedback>
</validation-provider>
</b-col>
</b-row>
</b-form>
</validation-observer>
Any hints are appreciated! Thank you.
<validation-provider
vid="url"
name="Link"
:rules="{ required: true, min: 11, regex: /^(http:\/\/|https:\/\/)?[a-z0-9]+([\-.]{1}[a-z0-9]+)*\.[a-z]{2,}(:[0-9]{1,5})?(\/.*)?$/ }"
v-slot="validationContext"
>
You can use the vid attribute to identify the Validation Provider and then name will be used in the error messages only.