I recently developed an input component for my Vue project and integrated it within my forms. My aim is to implement vee-validate for validating the inputs.
Initially, I attempted to validate my component like any regular input field. However, upon encountering difficulties in displaying error messages and inspecting Vue Devtools, I realized that errors are limited to the input component itself (despite having computed properties named "errors" and "fields" accessible by all components from root to input).
Subsequently, I referred to vee-validate documentation and explored using the Validation Provider and Validation Observer. These components proved to be complex, leaving me puzzled even after reading an article on Medium. The concept of scoped slots used by these components remains unclear to me.
I aspire to validate input components at the parent level and showcase their error messages above the form. Any approach, with or without Validation Observer and/or Validation Provider, is welcomed.
Here's a snippet of my input component:
<template>
<div class="info-input-control">
<div class="info-input-icon">
<slot name="icon"><span uk-icon="icon: pencil; ratio: 1.4"></span></slot>
</div>
<input :id="id" :type="type" :value="value" :name="name"
v-validate="validations || ''"
@keyup.enter="$emit('enter')"
@focus="isActive = true"
@blur="isActive = value.length > 0"
@input="$emit('input', $event.target.value)" :key="name">
<label :for="id" :class="{'info-input-label': true, 'is-active': isActive}">{{label}}</label>
</div>
</template>
<script>
export default {
name: 'InfoTextInput',
props: {
id: String,
label: String,
ltr: Boolean,
name: {
type: String,
required: true
},
type: {
type: String,
required: true,
validator: function (value) {
return ['text', 'password', 'email'].indexOf(value) !== -1
}
},
validations: Object,
value: String
},
data() {
return {
isActive: false
}
},
mounted() {
this.isActive = this.value.length > 0
}
}
</script>
Below is a simplified version of my form featuring just one input component:
<form action="#" @submit.prevent="userLogin">
<div class="uk-text-danger">
<span>Errors: </span>
<span>{{errors.first('mobile')}}</span>
</div>
<div class="uk-flex uk-flex-center">
<div class="uk-width-medium">
<info-text-input type="text" id="user-login-phone" label="Mobile" name="mobile" ltr v-model="login.mobile" :validations="mobileValidations" key="login-mobile">
<template v-slot:icon>
<span uk-icon="icon: phone; ratio: 1.4"></span>
</template>
</info-text-input>
</div>
</div>
</form>
P.S: I have globally registered Validation Observer and Validation Provider.