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
- If both descriptionActiEconomiques and noga are left empty, the validation should fail, and an error should show for both fields with the message: "L'un des deux champs 'Description des Activités Économiques' ou 'NOGA' est requis."
Actual Behavior
- No error message appears when both fields are empty.
- No error in the console too.
Any ideas on why this validation rule isn't working or how I can fix this?
Thanks in advance!