Translations

Formio.js uses i18n, a lightweight translation module, to allow users to pass in a translation option during form construction. This gives users control over complex elements such as: setting a form language dynamically, changing Form.io’s default error messages, and allowing for translating custom error message that we’re configured in a forms JSON definition. The below example illustrates how to leverage this module in any application, regardless of framework preference.

Form Construction

This example includes a simple HTML that has a Form.io style sheet, the Core library, a button group for toggling languages, and a div where createForm method will render the form.

<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn btn-default" onclick="setLanguage('en')">English</button>
  <button type="button" class="btn btn-default" onclick="setLanguage('sp')">Español</button>
</div>
<div id="formio"></div>

During the createForm method, the first parameter determines where to render the form. This example targets the HTML <div> element with the formio Id. The second parameter accepts either a form path (URL String) or the form component directly. The third parameter handles form options such as readOnly or in this case, the translations.

Formio.createForm(document.getElementById('formio'), 'https://wzddkgsfhfvtlmv.form.io/translations', {
 language: 'sp',
  i18n: {
    en: {
      'Submit': 'Complete'
    },
    sp: {
      'Submit': 'Enviar',
      'Please correct all errors before submitting.': 'Por favor, corrija todos los errores antes de enviar.',
      'My custom error message' : 'Mi mensaje de error personalizado',
      required : '{{field}} es requerido.',
      invalid_email: '{{field}} debe ser un correo electrónico válido.',
      error : 'Por favor, corrija los siguientes errores antes de enviar.',
    }
  }
}).then(function(form) {
  window.setLanguage = function(lang) {
    form.language = lang;
  };
});

A few things to note about form translations. First, the default language can be set at form creation, in this example it's set to Spanish. Secondly, users can translate the Form.io English defaults. As a result, the system can be configured to match the users needs. The example above will change the submit to read Complete instead. Finally, {{}} syntax can be used to fetch field values or other field properties like length or regex expressions.

Form Defaults

Here is a list of some helpful defaults:

{
  error : "Please fix the following errors before submitting.",
  invalid_date :"{{field}} is not a valid date."
  invalid_email : "{{field}} must be a valid email."
  invalid_regex : "{{field}} does not match the pattern {{regex}}."
  mask : "{{field}} does not match the mask."
  max : "{{field}} cannot be greater than {{max}}."
  maxLength : "{{field}} must be shorter than {{length}} characters."
  min : "{{field}} cannot be less than {{min}}."
  minLength : "{{field}} must be longer than {{length}} characters."
  next : "Next"
  pattern : "{{field}} does not match the pattern {{pattern}}"
  previous : "Previous"
  required : "{{field}} is required"
}