I tried to create a simple validation in vue js using primevue and yup:

<script setup>
import { Form, FormField } from '@primevue/forms';
import { useToast } from 'primevue/usetoast';

import { yupResolver } from '@primevue/forms/resolvers/yup';
import * as yup from 'yup';

const toast = useToast();
const formStore = useFormStore();

const formData = reactive({
    frequencies: {
        frequencyType: '',
        frequencyDays: [],
        frequencyWeeks: [],
        frequencyTimes: [
            {
                frequencyTimeValue: '',
                frequencyTimeMaxDuration: ''
            }
        ]
    },
});

const resolver = yupResolver(
    yup.object({
          frequencies: yup.object({
            frequencyType: yup.string().required('Checking Frequency is required.')
        })
    })
);
</script>
<template>
    <Form :initialValues="formData" :resolver @submit="onFormSubmit" class="flex flex-col gap-2 w-full">
 <FormField v-slot="$field" name="frequencies.frequencyType" class="flex flex-col gap-1">
                            <label for="frequencyType" class="block text-sm font-medium">Checking Frequency</label>
                            <Select v-model="formData.frequencies.frequencyType" :options="frequencyOptions" optionValue="value" optionLabel="label"
                                class="w-full" :invalid="$field.invalid" />
                            <Message v-if="$field.invalid" severity="error" size="small" variant="simple">
                                {{ $field.error?.message }}
                            </Message>
                        </FormField>
 </Form>
</template>

The problem is error warning doesn't appear, but if i change name="frequencyType" and also change the nested object become flatten, it's worked. Any suggestion?

I tried to create a simple validation in vue js using primevue and yup:

<script setup>
import { Form, FormField } from '@primevue/forms';
import { useToast } from 'primevue/usetoast';

import { yupResolver } from '@primevue/forms/resolvers/yup';
import * as yup from 'yup';

const toast = useToast();
const formStore = useFormStore();

const formData = reactive({
    frequencies: {
        frequencyType: '',
        frequencyDays: [],
        frequencyWeeks: [],
        frequencyTimes: [
            {
                frequencyTimeValue: '',
                frequencyTimeMaxDuration: ''
            }
        ]
    },
});

const resolver = yupResolver(
    yup.object({
          frequencies: yup.object({
            frequencyType: yup.string().required('Checking Frequency is required.')
        })
    })
);
</script>
<template>
    <Form :initialValues="formData" :resolver @submit="onFormSubmit" class="flex flex-col gap-2 w-full">
 <FormField v-slot="$field" name="frequencies.frequencyType" class="flex flex-col gap-1">
                            <label for="frequencyType" class="block text-sm font-medium">Checking Frequency</label>
                            <Select v-model="formData.frequencies.frequencyType" :options="frequencyOptions" optionValue="value" optionLabel="label"
                                class="w-full" :invalid="$field.invalid" />
                            <Message v-if="$field.invalid" severity="error" size="small" variant="simple">
                                {{ $field.error?.message }}
                            </Message>
                        </FormField>
 </Form>
</template>

The problem is error warning doesn't appear, but if i change name="frequencyType" and also change the nested object become flatten, it's worked. Any suggestion?

• vue.js
• validation
• yup
• primevue

1 Answer 1

Seem to be a PrimeVue issue :

https://github/primefaces/primevue/issues/6924

https://github/primefaces/primevue/issues/7075

fixed here :

https://github/primefaces/primevue/commit/536d21cef153416c665f728ee04012a0c492ae69