add validation i18n messages

components/FormField.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
   srHideLabel?: boolean
 }>()
 
+const { t } = useI18n()
 const { errorMessage } = useField(() => props.name)
 const invalid = computed(() => !!errorMessage.value)
 const describedBy = computed(() => {
@@ -24,6 +25,16 @@ const describedBy = computed(() => {
   )
 })
 
+const error = computed(() => {
+  const e = errorMessage.value as
+    | string
+    | undefined
+    | { key: string; values: Record<string, any> }
+  if (!e) return ''
+  if (typeof e === 'string') return t(e)
+  return t(e.key, e.values)
+})
+
 provide(formGroupExtras, {
   describedBy,
   invalid,
@@ -68,7 +79,7 @@ provide(formGroupExtras, {
           aria-atomic="true"
           class="text-error mt-1"
         >
-          {{ errorMessage }}
+          {{ error }}
         </div>
         <small
           v-if="description"

locales/en-US.json

@@ -6,8 +6,10 @@
   "username": "Username",
   "password": "Password",
   "fullname": "Full name",
+  "mail_address": "E-mail address",
   "mail_addresses": "E-mail addresses",
   "mail_forward": "E-mail forwarding address",
+  "mail_forwards": "E-mail forwarding addresses",
   "new_mail": "newmail{'@'}mydomain.org",
   "new_forward": "newforward{'@'}myforeigndomain.org",
   "add_mail": "Add an e-mail alias",
@@ -53,4 +55,11 @@
   "footerlink_support": "Support",
   "footerlink_administration": "Administration",
   "skip_to_main_content": "Skip to main content",
+  "v": {
+    "field_invalid": "Field value is invalid",
+    "field_required": "Field value is required",
+    "email": "Invalid email: must be alphanumeric and '_.' characters only (e.g. someone{'@'}example.com, s0me-1{'@'}example.com)",
+    "string_too_short": "Invalid value: must be at least {min} characters",
+    "password_not_match": "Passwords don't match."
+  }
 }

pages/edit.vue

@@ -10,7 +10,7 @@ const { handleSubmit, setFieldError } = useForm({
   validationSchema: toTypedSchema(
     yup.object({
       username: yup.string().required(),
-      fullname: yup.string().required().min(1),
+      fullname: yup.string().required().min(2),
       mailalias: yup.array().of(yup.string().email().required()),
       mailforward: yup.array().of(yup.string().email().required()),
     }),

pages/password.vue

@@ -6,11 +6,11 @@ import * as yup from 'yup'
 const { handleSubmit } = useForm({
   validationSchema: toTypedSchema(
     yup.object({
-      current: yup.string().min(8),
+      current: yup.string().required().min(8),
       password: yup.string().required().min(8),
       confirmPassword: yup
         .string()
-        .oneOf([yup.ref('password')])
+        .oneOf([yup.ref('password')], 'v.password_not_match')
         .required(),
     }),
   ),

plugins/vee-i18n.ts

@@ -0,0 +1,15 @@
+import { setLocale } from 'yup'
+
+export default defineNuxtPlugin(() => {
+  // https://github.com/jquense/yup/blob/master/src/locale.ts
+  setLocale({
+    mixed: {
+      default: 'v.field_invalid',
+      required: 'v.field_required',
+    },
+    string: {
+      email: 'v.email',
+      min: ({ min }) => ({ key: 'v.string_too_short', values: { min } }),
+    },
+  })
+})