Issues arising from Vue, Yup, and i18n integration for translations

Question

Issues arising from Vue, Yup, and i18n integration for translations

I am currently developing a Vue.js App (using Vite) where I have integrated Vee-validate with Yup for form validation, as well as i18n for message translation. However, I am experiencing an issue where the custom errors defined in the schema do not dynamically update when the user changes the locale using $i18n.locale='xx'.

Here is the schema code snippet:

import { useI18n } from "vue-i18n"

const {t} = useI18n()

const schema = yup.object().shape({
  username: yup
    .string()
    .required(t("field_required"))
    .email(t("field_error_email")),
  password: yup.string().required(t("field_required"))
})

It is worth mentioning that messages displayed directly in the template using $t("message") function are functioning properly.

Below are the versions of the dependencies used:

"dependencies": {
    "vee-validate": "^4.5.11",
    "vue": "^3.2.33",
    "vue-i18n": "^9.1.9",
    "yup": "^0.32.11"
}

javascript vue.js yup vite vue-i18n

Answer 1

Answer №1

t("field_required") is used as a static string value when setting up the component, making it non-reactive. To make it reactive, the message should be evaluated at the time it is actually needed, such as during schema validation. Ideally, the required and other schema methods should accept a function to lazily evaluate the message for this purpose, which they currently do.

Instead of:

const schema = yup.object().shape({
  username: yup
    .string()
    .required(() => t("field_required"))
    ...

Answer 2

t("field_required") is used as a static string value when setting up the component, making it non-reactive. To make it reactive, the message should be evaluated at the time it is actually needed, such as during schema validation. Ideally, the required and other schema methods should accept a function to lazily evaluate the message for this purpose, which they currently do.

Instead of:

const schema = yup.object().shape({
  username: yup
    .string()
    .required(() => t("field_required"))
    ...

Answer 3

Answer №2

When working with a watcher, the structure might resemble the following:

   watch(i18n.global.locale, () => {
     if (<TOBECONFIRMED>.meta.value.touched) <TOBECONFIRMED>.validate();
   });

meta and validate are both attributes that can be extracted from useForm() if vee-validate is utilized.

Answer 4

When working with a watcher, the structure might resemble the following:

   watch(i18n.global.locale, () => {
     if (<TOBECONFIRMED>.meta.value.touched) <TOBECONFIRMED>.validate();
   });

meta and validate are both attributes that can be extracted from useForm() if vee-validate is utilized.

Answer 5

Answer №3

If you want to pass your translated string, you can do it like this:

import * as yup from 'yup';

const schema = yup.object({
    name: yup.string().required(),
    email: yup.string('Must be string')
                .email('Must be email')
                .required('Required input'),
    password: yup.string().required().min(6),
});

https://i.sstatic.net/1TXsL.png

Make sure to also refer to this link: https://www.npmjs.com/package/yup#validation-tests

Answer 6

If you want to pass your translated string, you can do it like this:

import * as yup from 'yup';

const schema = yup.object({
    name: yup.string().required(),
    email: yup.string('Must be string')
                .email('Must be email')
                .required('Required input'),
    password: yup.string().required().min(6),
});

https://i.sstatic.net/1TXsL.png

Make sure to also refer to this link: https://www.npmjs.com/package/yup#validation-tests

Answer 7

Answer №4

I managed to figure it out, but I am receiving a message with an extra set of quotation marks. For instance, we expect to see (The Password field is required) but we are seeing ("The Password field is required").

Below is the code snippet I am working with.

import ValidateForm from '@/composable/validation/schemas/ValidateForm';
import { useLocalization } from 'vue-i18n';

const mRequiredField = (fieldName: string) => {
  const { t } = useLocalization();
  return computed<string>(() => {
    return t('validation.required', { field: t(`fields.${fieldName}`) });
  });
};

const { errors, values, handleSubmit, resetForm } = ValidateForm(
  yup.object({
    password: yup.string().required(mRequiredField('password')),
  }),
);

view image details here

Answer 8

I managed to figure it out, but I am receiving a message with an extra set of quotation marks. For instance, we expect to see (The Password field is required) but we are seeing ("The Password field is required").

Below is the code snippet I am working with.

import ValidateForm from '@/composable/validation/schemas/ValidateForm';
import { useLocalization } from 'vue-i18n';

const mRequiredField = (fieldName: string) => {
  const { t } = useLocalization();
  return computed<string>(() => {
    return t('validation.required', { field: t(`fields.${fieldName}`) });
  });
};

const { errors, values, handleSubmit, resetForm } = ValidateForm(
  yup.object({
    password: yup.string().required(mRequiredField('password')),
  }),
);

view image details here

Issues arising from Vue, Yup, and i18n integration for translations

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to stop your Browser from Caching

Using Angular to sort arrays based on the values in a separate array

Is there a way to speed up the loading time of React in the browser?

I'm running into some issues with flexbox and I'm in need of some assistance to find

The ideal structure for a Vue app

Should you consider using the Singleton pattern in Node.js applications?

Removing vacant rows from a table using Jquery in asp.net mvc

Tips for applying a class to an element depending on data stored in Local Storage using JQuery

How can we effectively manage error responses and retry a failed call in NodeJS without getting tangled in callback hell?

JavaScript having trouble parsing JSON, despite Chrome console being able to parse it flawlessly

The search function for selecting plugins is not functioning properly when additional options are added

Obtaining the innerHTML value using JavaScript in an Asp.net Core 5 View

Insert a new class within the container div

Approximating Values with JavaScript in Selenium

What is the process for combining multiple Vue components into a cohesive npm package?

Tips for retrieving the text enclosed within a <span> tag using jQuery

Speed up the opening and closing of a div element on mouse hover

Discover the art of utilizing two distinct binding strings, wherein upon the selection of either, the alternate binding string shall automatically be

Selenium and Python encountered an ElementNotInteractableException, indicating that the element was not interactable when inserting a value

How can I make the row color of a jQuery datatable change when the row is selected?