[v4] error grouping

[GitzJoey]

hi, in the previous version we can use data-vv-scope to scoping/grouping some of the errors is this available in v4 ? i tried to check the documentation but not avail

[logaretm]

By previous you mean version 2, this was dropped in version 3. At the moment, I have no plans for this for version 4.

[GitzJoey]

undestand that this features already dropped few version ago just wondering of scenario 1 form with tabs in it, each tabs might have fields to validate with this scope features is usefull to indicate which tabs have an errors

[lk77]

@logaretm so what is the solution for this ? make each scope a different form ? i'm in the process of upgrading from v2 to v4, and i don't know what to do with the multi steps forms, i want to validate each step before allowing the user to go further

i've checked the v3 migration guide but there is no tips for that data-vv-scope

[logaretm]

@lk77 There is an official example for multistep forms here.

[lk77]

thanks !

[simonmaass]

I understand the examples if you have steps and click through them.... but what if you use the vuetify tabs for example... there it is not step sequence... I am not sure how I would show to the user on which tab an error has occured... I would appreciate have help! thank you @logaretm for this great library!

This is for example a setup we have and I am not sure how I would show to the user which tab has errors...:

<template lang="pug">
v-tabs(v-model="activeTab", slider-color="accent", stacked, fixed-tabs, show-arrows)
  v-tab(v-for="tab in tabs", :key="tab.key" :value="tab.key")
    v-icon(v-if="Object.keys(errors).length", color="red") mdi-alert-circle-outline
    v-icon(v-else) {{ tab.icon }}
    | {{ tab.label }}
v-window(v-model='activeTab')
  v-window-item(value="stammdaten")
    v-row
      v-col(cols="4", sm="5")
        v-text-field(v-bind="vorname", clearable)
  v-window-item(value="versichertendaten")
    v-row
      v-col(cols="4", sm="5")
        v-text-field(v-bind="nachname", clearable)
  v-window-item(value="adressdaten")
    div Adresse
</template>
<script setup lang="ts">
import { object, string } from 'yup'

const props = defineProps<{ kunde: Kunde }>()
const { kunde } = toRefs(props)
const emit = defineEmits<{
  'update:model-value': [value: Kunde]
  close: [value: boolean]
}>()

const schema = [
  object({
    vorname: string().required().label('Vorname'),
    nachname: string().required().label('Nachname')
  }),
]

const { values, defineComponentBinds, resetForm, handleSubmit, errors } = useForm({
  initialValues: kunde,
  validationSchema: schema
})
const vorname = defineComponentBinds('vorname', (state) => vuetifyConfig(state, schema[0]))
const nachname = defineComponentBinds('nachname', (state) => vuetifyConfig(state, schema[1]))

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

watch(
  () => values,
  () => emit('update:model-value', values),
  { deep: true }
)
const tabs = [
  { label: 'Stammdaten', key: 'stammdaten', icon: 'mdi-face-man' },
  { label: 'Versichertendaten', key: 'versichertendaten', icon: 'mdi-hospital-box' },
  { label: 'Adressdaten', key: 'adressdaten', icon: 'mdi-home' }
]
const activeTab = ref(tabs[0].key)
</script>

[lk77]

@simonmaass you can use the errors for that, but you will need to know in which tab is the field, vee-validate won't tell you that

I usually have a schema for each step, and i merge those schemas in one before passing the schema to vee-validate, that way i can find out easily which step has errored

[oracast]

yes I have the same problem. groups would be great. but for now I will have to write biggggggggggg conditions to check if error in specific tab