Skip to main content

Localization

You could define your own translations for different languages. To do that you should define dictLocale array, like:

[
  {
    key: 'Name is required',
    dict: {
      Spanish: 'Se requiere el nombre',
      French: 'Le nom est requis',
    },
  },
  {
    key: 'Name is too short',
    dict: {
      Spanish: 'El nombre es muy corto',
      French: 'Le nom est trop court',
    },
  },
  {
    key: 'Name is too long',
    dict: {
      Spanish: 'El nombre es demasiado largo',
      French: 'Le nom est trop long',
    },
  },
  {
    key: 'Email is required',
    dict: {
      Spanish: 'Correo electronico es requerido',
      French: "L'e-mail est requis",
    },
  },
  {
    key: 'Email is invalid',
    dict: {
      Spanish: 'El correo electrónico es invalido',
      French: 'Le courriel est invalide',
    },
  },
];

Field key should be defined as a key string, which also should be defined as errorMessage in a rule object.

dict should be an object with languages keys with their translations. To switch a language you should call validation.setCurrentLocale('es');. The argument for setCurrentLocale() (docs) method you should pass the key, which you defined in dict object, or you could call with empty argument to set the default language (strings defined in key field).

document.querySelector('#change-lang-btn-en').addEventListener('click', () => {
  validation.setCurrentLocale();
});
document.querySelector('#change-lang-btn-ru').addEventListener('click', () => {
  validation.setCurrentLocale('ru');
});
document.querySelector('#change-lang-btn-es').addEventListener('click', () => {
  validation.setCurrentLocale('es');
});

Demo​


Check out the code
<form id="localisation_form" autocomplete="off" novalidate="novalidate">
  <div>
    <div class="control-wrapper">
      <label class="input-label" for="localisation_language"
        >Change error messages language</label
      >
      <div class="input-wrapper">
        <select class="select minimal" id="localisation_language">
          <option value="">--Please select an option--</option>
          <option value="English" selected="">English</option>
          <option value="Spanish">Spanish</option>
          <option value="French">French</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="control-wrapper">
        <label class="input-label" for="localisation_form_name">Name</label>
        <div class="input-wrapper">
          <input
            id="localisation_form_name"
            class="input"
            autocomplete="off"
            type="text"
            placeholder="Enter your name"
          />
        </div>
      </div>
    </div>
    <div class="col">
      <div class="control-wrapper">
        <label class="input-label" for="localisation_form_email">Email</label>
        <div class="input-wrapper">
          <input
            id="localisation_form_email"
            class="input"
            autocomplete="off"
            type="text"
            placeholder="Enter your email"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="control-wrapper">
    <button type="submit" class="button">Submit</button>
  </div>
</form>