Currently, I am working on creating a Registration form with multiple "Input Field" components that require validation once the Submit button is pressed. While each input field validates individually when the text is changed, I am struggling to implement a global call to validate all input fields at once. My goal is to achieve something similar to the example here:
This issue is akin to the question posted here: Validate child input components on submit with Vee-Validate, but I am having trouble grasping the solution.
Here is my 'singleInput.vue' component:
<template lang="html">
<div :class="'col m'+col">
<div class="input-field">
<i v-if="icon" class="material-icons prefix">{{icon}}</i>
<input
v-if="area"
:type="type"
@input="onChange"
:id="id"
:required="required"
:name="id"
v-validate="'required'"
/>
<textarea
v-if="!area"
@input="onChange"
:id="id"
:required="required"
:name="id"
class="materialize-textarea"></textarea>
<label :for="id">
{{label}}
<span v-if="required" class="red-text">*</span>
</label>
<span class="red-text error">{{$store.state.errors[id]}}</span>
</div>
</div>
</template>
<script>
export default {
name:'single-input',
props: {
col:{
type: Number,
default:6
},
id:{
type: String,
required:true
},
required:{
type:Boolean,
default: true
},
label:{
type:String,
required:true
},
onChange:{
type:Function,
required:true
},
area:{
type: Boolean,
default: true
},
type:{
type: String,
default: "text"
},
icon:{
type:String
},
validation:{
type:String
}
}
}
</script>
<style lang="css">
</style>
And here is the 'Info.vue' component:
<template lang="html">
<div class="row">
<single-input v-for="(info,i) in informations" :id="info.id" :label="info.label" :onChange="onChange" :area="info.area" :key="i" :required="info.required" :col="info.col" :type="info.type" :icon="info.icon"></single-input>
</div>
</template>
<script>
import SingleInput from "./SingleInput";
export default {
name: 'info',
methods:{
onChange(e){
}
},
data(){
return{
informations:[
{
label: "First Name",
id: "fname",
icon: "person"
},
{
label: "Last Name",
id: "lname",
required:false,
icon: "person"
},
{
label: "Email",
id: "email",
type:"email",
icon:'email'
},
// Add more information objects as needed...
]
}
},
components:{
SingleInput
}
}
</script>
<style lang="css">
</style>
I have been trying my best, but I am unable to access errors in 'Info.vue'. Any assistance would be greatly appreciated!