Howto i18n rules messages + Zod toFormValidator?

[Sjoerd82]

This regards a setup using:

• Composition API
• Zod schema validation
• i18n messages

The Zod validation documentation shows us that we can include messages for certain error conditions within the Zod schema. Like so: password: zod.string().nonempty('This is required').min(8, { message: 'Too short' }).
https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation#form-level-validation

The i18n documentation shows us that we can store messages for multiple locales using defineRule(), configure(), and localize().
https://vee-validate.logaretm.com/v4/guide/i18n/

However, these two don't seem to work together. I've tried the following:

<script setup lang="ts">
    import { Test,TTest } from '../../model/test'
    import { useField, useForm } from 'vee-validate'
    import { toFormValidator } from '@vee-validate/zod'
    import { defineRule, configure } from 'vee-validate'
    import { required } from '@vee-validate/rules'
    import { localize } from '@vee-validate/i18n'

    // Define the rule globally
    defineRule('required', required)

    // Error message
    configure({
        generateMessage: localize({
            en: {
                messages: {
                    required: 'This field is required',
                },
            },
            nl: {
                messages: {
                    required: 'Dit veld is verplicht',
                },
            },
        }),
    })

    // Initial values
    const formValues = {
        test_name: Test.shape.test_name._def.defaultValue(),
    }

    // Zod schema -> VeeValidate
    const validationSchema = toFormValidator(Test)
    const { handleSubmit, errors } = useForm({
        validationSchema,
        initialValues: formValues,
    })

    const { value: test_id } = useField<number>('test_id', 'required')
    const { value: test_name } = useField<string>('test_name', (value) => {
        if (!value) {
            return 'This one is mandatory!'
        }
        return true
    })
}
</script>

Zod schema:

export const Test = z.object({
      test_id                   : z.bigint().or(z.number())
    , test_name                 : z.string().max(50).default('New item')
    , test_string               : z.string().max(10).optional()
    , test_bool                 : z.boolean().default(false)
})
export type TTest = z.infer<typeof Test>

Both two fields return an "Invalid input" error when empty (null for string field, null/'' for number field).
My thinking here is that I add the "required" rule to the field, which should when fired lookup the message from the configuration.

I now have suspicions that I may not be passing the rules correctly to the form/fields. I've read in #3380 that validation rules are ignored when useForm is in play. However, there does not seem to be a mechanism to load the validation rules into useForm

Also, shouldn't a required field in Zod not automatically fire the required-rule? Why do I need to specify it again for VeeValidate?

[logaretm]

i18n messages are not meant to be used with either yup or zod. This is only for @vee-validate/rules.

As per the docs:

This guide only addresses generating error messages for globally defined validators using vee-validate’s own @vee-validate/i18n plugin.

For i18n localization for zod/yup you should check their ecosystems as this falls outside vee-validate responsibilities.

[Sjoerd82]

I would prefer to use VeeValidate for the localization, I just mentioned Zod for completeness. Exploring VeeValidate further I noticed that localized message actually do work, but only if I specify one language.

Works:

    configure({
        generateMessage: localize('nl', {
            names: {
                name: 'Naam',
                age: 'Leeftijd',
                ageConfirm: 'Bevestig',
            },
        }),
    })

Does not work:

    configure({
        generateMessage: localize({
            nl: {
                names: {
                    name: 'Naam',
                    age: 'Leeftijd',
                    ageConfirm: 'Bevestig',
                },
            },
        }),
    })

To verify this, I continued to change the format in the StackBlitz example at https://vee-validate.logaretm.com/v4/guide/i18n/ to the multilanguage format, and here both format work! But, the StackBlitz example is at v4.6.6, while I'm on the newer v4.7.4.

When forking the example and upgrading to v4.7.4, the "multilanguage" format no longer works. Seems like a bug in VeeValidate?