Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n Field Name translation is not working as expected in error messages. #5874

Open
wescleveland56 opened this issue Oct 21, 2024 · 2 comments
Assignees

Comments

@wescleveland56
Copy link

wescleveland56 commented Oct 21, 2024

Describe the bug
When using i18n options to translate text, labels are being properly translated but the field name in error messages is the original label (untranslated). This is working fine in the Formio.js jsFiddle environment when Formio is included from https://cdn.form.io/js/formio.embed.js but it is not working in the Formio.js sandbox using version 5.0.0-rc.91.

Version/Branch
5.0.0-rc.91

To Reproduce
Steps to reproduce the behavior:

  1. Open up the Formio.js sandbox at https://formio.github.io/formio.js/app/sandbox.html
  2. Insert the following form Options JSON:
{
  "language": "en",
  "i18n": {
    "en": {
      "My Number": "My Value"
    }
  }
}
  1. Insert the following Form JSON:
{
  "components": [
    {
      "label": "My Number",
      "applyMaskOn": "change",
      "mask": false,
      "tableView": false,
      "delimiter": false,
      "requireDecimal": false,
      "inputFormat": "plain",
      "truncateMultipleSpaces": false,
      "validate": {
        "required": true,
        "min": 0,
        "max": 999
      },
      "validateWhenHidden": false,
      "key": "myNumber",
      "type": "number",
      "input": true
    }
  ]
}
  1. At this point, you should see that the field's label ("My Number") has been properly rendered as "My Value".
  2. Type "9999" into the field.
  3. The error message reads: "My Number cannot be greater than 999."
  4. Type "-1" into the field.
  5. The error message reads: "My Number cannot be less than 0."
  6. Delete the contents of the field.
  7. The error message reads: "My Number is required"

Expected behavior
The expected behavior is that "My Number" in error messages would be translated to "My Value" as happens at https://jsfiddle.net/qa24u7gt/

@wescleveland56
Copy link
Author

Consider the following unit test addition to Webform.unit.js:

it('Should translate form field names in alerts', () => {
    const formElement = document.createElement('div');
    const form = new Webform(formElement, {
      language: 'es',
      i18n: {
        es: {
          'Field Label': 'Etiqueta de campo',
          required: '{{field}} es obligatorio'
        }
      }
    });

    return form.setForm({
      components: [
        {
          type: 'textfield',
          label: 'Field Label',
          key: 'myfield',
          input: true,
          inputType: 'text',
          validate: {
            required: true
          }
        }
      ]
    })
      .then(() => form.submit())
      .catch(() => {
        // console.warn('nooo:', error)
      })
      .then(() => {
        const ref = formElement.querySelector('[ref="errorRef"]');
        assert.equal(ref.textContent.trim(), 'Etiqueta de campo es obligatorio');
      });
  });

@VikkiAlenn
Copy link

Thank you for your contribution. We created a ticket for our dev team to review. For the reference: FIO-9354

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants