New Sep 18, 2024

Zod .refine() method doesn't enforce "one of two fields required" rule in Vue 3

Libraries, Frameworks, etc. All from Newest questions tagged vue.js - Stack Overflow View Zod .refine() method doesn't enforce "one of two fields required" rule in Vue 3 on stackoverflow.com

I'm working on a Vite/Vue 3 project and using Zod for form validation. I have a form with these two fields :

descriptionActiEconomiques and noga

I need to enforce the rule that at least one of them must be filled out. If neither field is filled, both fields should show an error with the message: "L'un des deux champs 'Description des Activités Économiques' ou 'NOGA' est requis."

My full schema look like this:

export const formSchema = [
    // Step Inscription
    z.object({

// Unite Légale typeInscription: z .string({ required_error: 'Champs requis.', }), ide: z .string({ required_error: 'Champs requis.', }) .regex(/^CHE\d{9}$/, { message: "Le format doit être 'CHE' suivi de 9 chiffres", }), nameUniteLocal: z .string({ required_error: 'Champs requis.', }), formeJuridique: z .string({ required_error: 'Champs requis.', }), pays: z .string({ required_error: 'Champs requis.', }), langue: z .string({ required_error: 'Champs requis.', }), descriptionActiEconomiques: z .string() .optional(), noga: z .string() .optional(),

// Adresse npa: z .string({ required_error: 'Champs requis.', }) .min(4, 'NPA non valide.') .max(4, 'NPA non valide.'), localite: z .string({ required_error: 'Champs requis.', }), rue: z .string({ required_error: 'Champs requis.', }), adresseUniteNumero: z .string({ required_error: 'Champs requis.', }), uniteCasePostaleNumero: z .string({ required_error: 'Champs requis.', }) .optional(), uniteCasePostaleNpa: z .string({ required_error: 'Champs requis.', }) .optional(), uniteCasePostaleLocalite: z .string({ required_error: 'Champs requis.', }) .optional(),

// Contact numeroTelephone: z .union([s1,s2]), emailEntreprise: z .string({ required_error: 'Champs requis.', }) .email({ message: 'Email non valide.' }),

// Autre remarque: z .string() .optional(), attachedFile: z .string() .optional() }).refine((data) => data.descriptionActiEconomiques || data.noga, { message: "L'un des deux champs 'Description des Activités Économiques' ou 'NOGA' est requis.", path: ['descriptionActiEconomiques', 'noga'], }),

// Step Responsable z.object({

// Responsable responsablePersonneId: z .string() .optional(), responsableSexe: z .string() .optional(), responsablePrenom: z .string({ required_error: 'Champs requis.', }), responsableNom: z .string({ required_error: 'Champs requis.', }),

// Contact responsableNumeroTelephone: z .union([s1,s2]), responsableEmail: z .string({ required_error: 'Champs requis.', }) .email({ message: 'Email non valide.' }),

// Adresse responsablePays: z .string({ required_error: 'Champs requis.', }), responsableNpa: z .string({ required_error: 'Champs requis.', }) .min(4, 'NPA non valide.') .max(4, 'NPA non valide.'), responsableLocalite: z .string({ required_error: 'Champs requis.', }), responsableRue: z .string({ required_error: 'Champs requis.', }), responsableNumeroDeRue: z .string({ required_error: 'Champs requis.', }), }), ]

Like you see I tried to add :

.refine((data) => data.descriptionActiEconomiques || data.noga, {
        message: "L'un des deux champs 'Description des Activités Économiques' ou 'NOGA' est requis.",
        path: ['descriptionActiEconomiques', 'noga'],
    })

But dont' work...

Expected Behavior

Actual Behavior

Any ideas on why this validation rule isn't working or how I can fix this?

Thanks in advance!

Scroll to top