this is my vue comp, which i am trying to validate form, the errors already generated by Zod , Only need to display the error in corespondent element , here the validation done correctly , the errors goes into 'error' array which define in 'data', so, need to get the correct error from errors array and display it in 'span'
<template>
<div id="basic" class="w-full details-model relative hidden rounded-md mx-auto mt-2 py-3 px-3 bg-white border border-gray-300 opend-src" style="animation-name: animat-top;animation-duration: 0.4s;box-shadow: rgb(82 63 104 / 12%) 0px 0px 10px 0px;">
<span class="absolute inline-block w-4 h-4 bg-white top-[-.5rem] sm:left-20 sm:mr-4 sm:rotate-45"></span>
<form id="rank-form" class="mainpower-form flex flex-wrap gap-y-3 gap-x-4 pt-4 justify-between" enctype="multipart/form-data" >
<div class="flex-100 addrs-ctrl relative rounded-md mb-6">
<button class="inline-flex openDisBtn group relative w-full border !border-gray-300 items-center px-3 py-2.7 text-sm font-medium text-gray-400 rounded-md focus:!border-blue-500 focus:outline-none peer-focus:!text-blue-500 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
<span v-if="selectedRank" class="font-normal" >{{selectedRank}} </span>
<span v-else class="text-sm text-gray-400 font-normal">Selecet Rank</span>
<svg class="w-2.5 h-2.5 ml-auto" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
<label class="px-2 bg-white ml-2 z-20 font-medium absolute text-md text-gray-600 -translate-y-6 scale-76 top-[0.74rem] origin-[0] left-0 peer-focus:text-blue-500">Ranks</label>
</button>
<div class="z-50 dtls-menu absolute top-12 hidden bg-white rounded-md border !border-gray-300 shadow w-full mt-2 dark:bg-gray-700" style="box-shadow: rgb(0 0 0 / 3%) 0px 12.5px 10px, rgb(0 0 0 / 6%) 0px 100px 80px">
<div v-if="ranks.length" class="h-48 px-2 pb-3 pt-1 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" >
<div v-for="rank in ranks" :key="rank.id" class="flex py-2.5 px-2 border-b items-center border-b-gray-300 bg-gry-100 hover:bg-gray-200 dark:hover:bg-gray-600">
<input :id="rank.id" type="radio" name="rank_name" v-model="selectedRank" :value="rank.rank_name" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label :for="rank.id" class="w-full ml-2 mb-0 text-sm font-medium text-gray-900 capitalize rounded dark:text-gray-300">{{rank.rank_name}}</label>
</div>
</div>
<div v-else>
Loading disciplines...
</div>
</div>
</div>
<div class="flex-48">
<div class="relative z-0 mb-6 border border-gray-200 group rounded-md focus-within:!border-blue-400 ">
<input type="text" name="rank" id="rank " v-model="rank" class="placeholder:font-normal placeholder:text-sm block py-2.7 font-normal pl-3 w-full text-md text-gray-900 bg-transparent appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:!pl-4 focus:border-blue-600 peer" placeholder="rnking in selecetd year" required />
<label for="rank" class="px-2 bg-white ml-2 font-medium absolute text-sm text-gray-700 duration-300 transform -translate-y-6 scale-76 top-[0.74rem] -z-10 origin-[0] left-0 peer-focus:text-blue-500">Ranking</label>
</div>
</div>
<div class="flex-48">
<div class="relative z-0 mb-6 border border-gray-200 group rounded-md focus-within:!border-blue-400 ">
<input type="text" name="research" id="research" class="block py-2.7 font-normal pl-3 w-full text-md text-gray-900 bg-transparent appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:!pl-4 focus:border-blue-600 peer" placeholder="university research number .... " required />
<label for="research" class="px-2 bg-white ml-2 font-medium absolute text-sm text-gray-700 duration-300 transform -translate-y-6 scale-76 top-[0.74rem] -z-10 origin-[0] left-0 peer-focus:text-blue-500">Research Output</label>
</div>
</div>
<div class="flex-100 addrs-ctrl relative rounded-md mb-6">
<button class="inline-flex openDisBtn group relative w-full border !border-gray-300 items-center px-3 py-2.7 text-sm font-medium text-gray-400 rounded-md focus:!border-blue-500 focus:outline-none peer-focus:!text-blue-500 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
<span v-if="selectedYear" class="font-normal" >{{selectedYear}} </span>
<span v-else class="text-sm text-gray-400 font-normal">Selecet Year</span>
<svg class="w-2.5 h-2.5 ml-auto" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
<label class="px-2 bg-white ml-2 z-20 font-medium absolute text-sm text-gray-600 -translate-y-6 scale-76 top-[0.74rem] origin-[0] left-0 peer-focus:text-blue-500">Disciplines</label>
</button>
<div class="z-10 dtls-menu absolute top-12 hidden bg-white rounded-md border !border-gray-300 shadow w-full mt-2 dark:bg-gray-700" style="box-shadow: rgb(0 0 0 / 3%) 0px 12.5px 10px, rgb(0 0 0 / 6%) 0px 100px 80px">
<div v-if="rankingYears.length" class="h-48 px-2 pb-3 pt-1 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" >
<div v-for="year in rankingYears" :key="year" class="flex py-2.5 px-2 border-b items-center border-b-gray-300 bg-gry-100 hover:bg-gray-200 dark:hover:bg-gray-600">
<input :id="year" type="radio" name="year" v-model="selectedYear" :value="year" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label :for="year" class="w-full ml-2 mb-0 text-sm font-medium text-gray-900 capitalize rounded dark:text-gray-300">{{year}}</label>
</div>
</div>
<div v-else>
Loading disciplines...
</div>
</div>
</div>
<div class="form-group flex-100">
<button type="button" id="basicId" class="w-full mt-4 text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center" @click=" (event) => addRank(event)">Save Basic Info</button >
</div>
</form>
</div>
</template>
<script>
import { object, string, array } from "zod";
const schema = object({
rank_name: string().min(1).max(255),
rank: string().min(1).max(255),
research: string().min(1).max(255),
year: string().min(1).max(4),
});
export default {
name:'RanksInfo',
props:{
ranks :{
type: Array,
required: true
},
university_id:String
},
mounted() {
},
data(){
return{
selectedYear : '' ,
selectedLevel : [],
scholarship :{},
rankingYears : ['2020','2021'],
selectedRank : 'selecte rank',
id:'',
errors: null,
rank: '',
research: '',
}
},
methods:{
addRank(event){
alert("efrg")
const formElem = document.getElementById("rank-form");
const formData = new FormData(formElem);
const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;
formData.append('uni_id', this.university_id);
formData.append('_token', csrfToken);
const formDataObject = Object.fromEntries(formData.entries());
try{
schema.parse(formDataObject);
if (formData.get('rank_name') == '') {
if(formData.get('rank_name') == '' ){
}
else{
event.preventDefault();
fetch("/admin/university-rank/save", {
method: "POST",
body: formData,
})
.then(response => response.json())
.then(data => {
if(data.result){
}
if(data.error){
console.log("error--->" + data.error);
}
})
.catch(error => {
});
}
}
}catch (error) {
this.errors = error.errors;
}
},
},
};
</script>
