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 posible to use the default message from a language package. The following piece of code show how to use messages from English package:







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: {
                ...
            },
        }
    );
});

FormValidation has been translated into the following languages which are available in the dist/js/locales folder (and the dist/es6/locales folder if you want to use with JavaScript module).

Language File name Translated by
English en_US.js nghuuphuoc
Albanian sq_AL.js desaretiuss
Arabic ar_MA.js Arkni
Basque eu_ES.js xabikip
Belgium (French) fr_BE.js neilime
Belgium (Netherland) nl_BE.js dokterpasta
Bulgarian bg_BG.js mraiur
Catalan ca_ES.js ArnauAregall
Chilean Spanish es_CL.js marceloampuerop6
Chinese zh_CN.js shamiao
Czech cs_CZ.js AdwinTrave, budik21, cuchac
Danish da_DK.js Djarnis
Dutch (Netherland) nl_NL.js JvanderHeide
Finnish fi_FI.js traone
French fr_FR.js dlucazeau, jazzzz, neilime
German de_DE.js logemann
Greek el_GR.js pRieStaKos
Hebrew he_IL.js yakidahan
Hindi hi_IN.js gladiatorAsh
Hungarian hu_HU.js blackfyre
Indonesian id_ID.js egig
Italian it_IT.js maramazza
Japanese ja_JP.js tsuyoshifujii
Norwegian no_NO.js trondulseth
Persian (Farsi) fa_IR.js i0
Polish pl_PL.js grzesiek, lukaszbanasiak
Portuguese (Brazil) pt_BR.js marcuscarvalho6, dgmike
Portuguese (Portugal) pt_PT.js rtbfreitas
Romanian ro_RO.js filipac
Russian ru_RU.js cylon-v, stepin
Serbian sr_RS.js markocrni
Slovak sk_SK.js filipac
Spanish es_ES.js vadail
Swedish sv_SE.js ulsa
Taiwanese zh_TW.js tureki
Thai th_TH.js figgaro
Turkish sr_RS.js CeRBeR666
Ukrainian ua_UA.js oleg-voloshyn
Vietnamese vi_VN.js nghuuphuoc

From v1.0.0, FormValidation(.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.

The working example below shows an usage of English language package:

Tip

Look at the L10n plugin if you want to use multiple language packages and be able to switch between them