Localization

Using a language package
In the previous section, the error message for each validator is configured by the message option:
FormValidation.formValidation(
document.getElementById('loginForm'),
{
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
message: 'The username must be more than 6 and less than 30 characters long',
...
},
regexp: {
message: 'The username can only consist of alphabetical, number and underscore',
...
},
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
stringLength: {
message: 'The password must have at least 8 characters',
...
},
}
},
},
plugins: {
...
}
}
);
It is possible to use the default message from a language package. The following piece of code shows how to use messages from the English package:
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<!-- The language package has to be loaded after `bunde/popular(.min).js` -->
<script src="/vendors/@form-validation/umd/locales/en_US.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
const fv = FormValidation.formValidation(
document.getElementById('demoForm'),
{
// Set the default locale
locale: 'en_US',
localization: FormValidation.locales.en_US,
// Ignore the message option
// It will be taken from the language package
fields: {
username: {
validators: {
notEmpty: {
},
stringLength: {
min: 6,
max: 30,
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/
},
}
},
password: {
validators: {
notEmpty: {
},
stringLength: {
min: 8
},
}
},
},
plugins: {
...
},
}
);
});
</script>
FormValidation has been translated into the following languages which are available in the locales folder.
LanguageFile nameTranslated by
Englishen_US.jsnghuuphuoc
Albaniansq_AL.jsdesaretiuss
Arabicar_MA.jsArkni
Basqueeu_ES.jsxabikip
Belgium (French)fr_BE.jsneilime
Belgium (Netherland)nl_BE.jsdokterpasta
Bulgarianbg_BG.jsmraiur
Catalanca_ES.jsArnauAregall
Chilean Spanishes_CL.jsmarceloampuerop6
Chinesezh_CN.jsshamiao
Czechcs_CZ.jsAdwinTrave, budik21, cuchac
Danishda_DK.jsDjarnis
Dutch (Netherland)nl_NL.jsJvanderHeide
Finnishfi_FI.jstraone
Frenchfr_FR.jsdlucazeau, jazzzz, neilime
Germande_DE.jslogemann
Greekel_GR.jspRieStaKos
Hebrewhe_IL.jsyakidahan
Hindihi_IN.jsgladiatorAsh
Hungarianhu_HU.jsblackfyre
Indonesianid_ID.jsegig
Italianit_IT.jsmaramazza
Japaneseja_JP.jstsuyoshifujii
Norwegianno_NO.jstrondulseth
Persian (Farsi)fa_IR.jsi0
Polishpl_PL.jsgrzesiek, lukaszbanasiak
Portuguese (Brazil)pt_BR.jsmarcuscarvalho6, dgmike
Portuguese (Portugal)pt_PT.jsrtbfreitas
Romanianro_RO.jsfilipac
Russianru_RU.jscylon-v, stepin
Serbiansr_RS.jsmarkocrni
Slovaksk_SK.jsfilipac
Spanishes_ES.jsvadail
Swedishsv_SE.jsulsa
Taiwanesezh_TW.jstureki
Thaith_TH.jsfiggaro
Turkishtr_TR.jsCeRBeR666
Ukrainianua_UA.jsoleg-voloshyn
Vietnamesevi_VN.jsnghuuphuoc
From v1.0.0, popular(.min).js will not contain any language package including the English one. You have to load them manually as seen in the sample code above.

Using the npm packages

If you are using a bundler such as Webpack, Rollup, Parcel or Vite, etc., to bundle your application, then it's recommended to use the FormValidation npm packages.
  • Install the npm packages:
$ npm install @form-validation/bundle
$ npm install @form-validation/locales
  • Import and use the given localization package:
import { formValidation } from '@form-validation/bundle/popular';
import { en_US } from '@form-validation/locales';
formValidation(
document.getElementById('demoForm'),
{
// Set the default locale
locale: 'en_US',
localization: en_US,
// Ignore the message option
// It will be taken from the language package
fields: {
username: {
validators: {
notEmpty: {
},
stringLength: {
min: 6,
max: 30,
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/
},
}
},
password: {
validators: {
notEmpty: {
},
stringLength: {
min: 8
},
}
},
},
plugins: {
...
},
}
);

Basic example

The working example below shows the usage of the English language package:
Localization
Look at the L10n plugin if you want to use multiple language packages and be able to switch between them