Vee-validate on prime vue

[yogendrarr]

i am using primevue multiselect
<MultiSelect class="w-full" optionLabel="allocationAlgorithmName" optionValue="allocationAlgorithmId" id="algorithms" v-model="event.algorithm" display="chip" :options="algorithmOptions" placeholder="Select allocation algorithm" /> <small id="email-help" class="text-red-600">{{ errors.algorithms }}</small>
Below is script in vue 3 comp api
import { useForm } from 'vee-validate'; import * as yup from 'yup'; let event = ref({ // posts related data will be saved in this array advertisementPosts: [], advertisementId : null, algorithm:[], advertisementPosts:[] });

`const schema = yup.object({
type: yup.string().required().label('Advertisement'),
algorithms:yup.array().min(1, "At least one option is required").required().label('Algorithms'),
posts :yup.array().min(1, "At least one option is required").required().label('Advertisement Post')
});

const {handleSubmit, resetForm, errors } = useForm({
validationSchema: schema,
initialValues: event
});

const onSubmit = handleSubmit((values) => {
console.log('Submitted with', values);
});`

validation not working with objcts how to do this . please somebody explain this..!

[larrydevofficial]

I was able to use ChatGPT and it suggested wrapping CascadeSelect in a Field component. It worked. I would assume that you could achieve the same result using the MultiSelect component. Best.

<template>
  <Form @submit="handleSubmit">
    <Field name="method" :rules="validateMethod" v-slot="{ field, errors }">
      <CascadeSelect 
        id="method"
        v-bind="field" 
        :options="methods" 
        optionLabel="cname" 
        optionGroupLabel="name"
        v-model="selectedMethod" 
        :optionGroupChildren="['options','cities']" 
        style="min-width: 14rem" 
        placeholder="Select a Method" 
      />
      <span v-if="errors.length">{{ errors[0] }}</span>
    </Field>
    <button type="submit">Submit</button>
  </Form>
</template>