Skip to content

Implementing localization

Roberto Prevato edited this page Mar 10, 2016 · 3 revisions

The DataEntry widget requires an utility to implement client side localization, which is used to display proper error messages.

Currently, the jQuery-DataEntry widget supports these two libraries:

The first should be used only if advanced features like parsing of dates, support for currencies, etc., are not needed in other parts of the application. The second should be used if advanced localization features are required in other parts of the application.

The DataEntry widget itself only requires support for scoped translations, and templates containing mustaches ({{ }}) (see example below).

Example of localization implemented using I.js

This example shows how to implement localization using I.js. First, load the i.js library, in the desired way, for example:

  <script src="scripts/libs/i.js"></script>

Then, make sure that its regional object is extended with the required texts (and cultures):

_.extend(I.regional, {
  
  "en": {
    "errors": {
      "emptyValue": "The field cannot be empty",
      "notInteger": "The value is not a valid integer",
      "minValue": "The minimum value is {{min}}",
      "maxValue": "The maximum value is {{max}}",
      "invalidValue": "The value is invalid",
      "canContainOnlyLetters": "The field can contain only letters",
      "canContainOnlyDigits": "The field can contain only digits",
      "mustBeChecked": "This must be checked"
    }
  }
  
});

Please refer to the live demo and to the source code, to see a working example using I.js.

Example with i18n-js

This example shows how to implement localization using i18n-js. First, load the i18n-js library, in the desired way, for example:

  <script src="scripts/libs/i18n.js"></script>
  <script>
    I18n.defaultLocale = "en";
    I18n.locale = "en";
  </script>

Then, make sure that its translations object is extended with the required texts (and cultures):

_.extend(I18n.translations, {
  
  "en": {
    "errors": {
      "emptyValue": "The field cannot be empty",
      "notInteger": "The value is not a valid integer",
      "minValue": "The minimum value is {{min}}",
      "maxValue": "The maximum value is {{max}}",
      "invalidValue": "The value is invalid",
      "canContainOnlyLetters": "The field can contain only letters",
      "canContainOnlyDigits": "The field can contain only digits",
      "mustBeChecked": "This must be checked"
    }
  }
});

Clone this wiki locally