In my Laravel+Vue.js SPA ( Single Page Application) I am using the phone number input validation package from here, BootstrapVue from here and Veevalidate from here .
I think I need to show only the code inside my component file. The vue-phone-number-input component shows blue border and HTML5 error message tooltip (?) upon invalid data but no error message appears in red as it happens with name field. My code follows in EditProfile.vue:
<ValidationObserver ref="form" v-slot="{ passes }">
<div id="registration_form">
<b-form @submit.prevent="passes(onSubmit)" @reset="resetForm">
<ValidationProvider vid="name" rules="required|min:2" name="name" v-slot="{ valid, errors }">
<b-form-group
label="User Name:"
label-for="exampleInput1"
>
<b-form-input
type="text"
v-model="name"
:state="errors[0] ? false : (valid ? true : null)"
placeholder="Enter your name"
></b-form-input>
<b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</ValidationProvider>
<ValidationProvider vid="mobile" rules="required" name="mobile" v-slot="{ valid, errors }">
<b-form-group
label="Mobile:"
label-for="exampleInput1"
>
<vue-phone-number-input
v-model="mobile"
default-country-code="BD"
required
disable-leading-trailing-space
:state="errors[0] ? false : (valid ? true : null)"
@update="updatePhoneNumber"
placeholder="Enter Mobile Number"
/>
<b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</ValidationProvider>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</div><!-- end of id registration_form-->
</ValidationObserver>`
JS part inside EditProfile.vue is:
`import Datepicker from 'vuejs-datepicker';
import { ValidationObserver, ValidationProvider } from "vee-validate";
export default {
name: "EditProfile",
components: {
ValidationObserver,
ValidationProvider,
Datepicker
},
data: () => ({
name: "",
mobile:""
}),
methods: {
onSubmit() {
console.log("Form submitted yay!");
},
resetForm() {
this.name = "";
this.mobile = "";
requestAnimationFrame(() => {
this.$refs.form.reset();
});
}
}
};`
When the submit button is pressed then validation works for name field nad for vue-phone-number-input it also happens but no error message shows up in red color.
My Vue.js version is 2.6.10 and I used the latest versions of BootstrapVue and Veevalidate (3) as well.
How can I make the error message appear in red color for vue-phone-number-input element ?