Localization

Translate rule messages and field names into different languages by defining locale sources and switching the active locale. Validation feedback automatically adapts.

🗂️ Locale Source

The localize() API requires a locale source to be used globally to all forms. The locale source stores a list of localized names and messages defined by a lookup key.

{
  "messages": {
    "required": "Ce champ est obligatoire.",
    "email": "Veuillez entrer une adresse e-mail valide."
  },
  "names": {
    "username": "Nom d’utilisateur",
    "email": "Adresse e-mail"
  }
}

The following sources contain all the localized messages for the built-in rules. Use them directly, or as a reference for creating other locale source: English, French

🌍 Get Locale

Import from an external json file or declare it directly inside your code. Importing from an external source allows you to maintain your code easily and avoid code clutter.

{
  "messages": {
    "required": "Ce champ est obligatoire."
  }
}

import fr from 'somewhere'
localize({ fr })

🌐 Set Locale

Set a locale globally or per form without extra configuration. When setting a locale per form, any active message on that form will update instantly with the locale message.

import fr from 'somewhere'

localize({ fr })
setLocale('fr')

💬 Rule Message

The resolver uses the locale code and message key to localize a message. In the example below, fr and required will be used, resulting to: “Ce champ est obligatoire.”

localize({
  fr: {
    messages: {
      required: 'Ce champ est obligatoire.'
    }
  }
})

const form = document.getElementById('#form')
setLocale('fr')
validateForm(form)

<form id="form">
  <input type="text" required />
</form>

⚠️ Suriform includes required by default, so you don’t need to define it manually.

🏷️ Field Name

The resolver uses the locale code and name key to localize a name. In the example below, fr and email will be used, resulting to: “Veuillez entrer une Adresse e-mail valide.”

localize({
  fr: {
	messages: {
		email: 'Veuillez entrer une {field} valide.'
	}
    names: {
      email: 'Adresse e-mail'
    }
  }
})

const form = document.getElementById('#form')
setLocale('fr')
validateForm(form)

<form id="form">
  <input type="email" name="email" required />
</form>