How can I validate nested object fields with Yup and PrimeVue Forms in Vue.js?

It turns out that the issue is due to how the PrimeVue forms resolver currently handles nested field names. In your example you’re using a nested object (with the field name "frequencies.frequencyType") in both the initial values and the schema, but the resolver isn’t mapping errors on nested properties correctly. When you flatten the data structure and use a simple name like "frequencyType", the mapping works as expected.

There are a couple of approaches to work around this issue:

1. Flatten the form state:
   If possible, refactor your state to use flat property names for fields that need validation. This ensures the resolver can easily map the field to its corresponding schema rule.

2. Custom transformation or resolver adjustment:
   If you need to keep a nested structure (for example, to maintain a logical grouping of related data), you might consider writing a custom adapter that “flattens” the nested keys before passing the values to yup, and then transforms the error object back into a nested format. This approach requires additional handling (e.g., using a helper like lodash’s get/set) but can let you keep a nested data model.

For example, if you choose to flatten the state, your code might look like this:

VUECopied
<script setup>
import { reactive } from 'vue'
import { Form, FormField } from '@primevue/forms'
import { yupResolver } from '@primevue/forms/resolvers/yup'
import * as yup from 'yup'

const formData = reactive({
  frequencyType: ''
})

const resolver = yupResolver(
  yup.object({
    frequencyType: yup.string().required('Checking Frequency is required.')
  })
)

function onFormSubmit(values) {
  // Your submit logic using the flat values
  console.log(values)
}
</script>

<template>
  <Form :initialValues="formData" :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-2 w-full">
    <FormField v-slot="$field" name="frequencyType" class="flex flex-col gap-1">
      <label for="frequencyType" class="block text-sm font-medium">Checking Frequency</label>
      <Select v-model="formData.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>

In short, if you’re experiencing issues with validation messages not showing up when using nested keys, it’s likely because the current resolver implementation in PrimeVue forms doesn’t fully support nested paths. Flattening your state or applying a custom transformation is the recommended solution until support for nested object names is improved.

Hope this helps!