L10n plugin

Support multiple locales for error messages

Usage

As you already knew, you can use the message option to indicate error message for each validator:


FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            userName: {
                validators: {
                    notEmpty: {
                        message: '...'
                    },
                    stringLength: {
                        message: '...'
                    },
                },
            },
            ...
        },
    }
);

This L10n plugin allows to define messages in different languages. The following piece of code is the starting point to use the L10n plugin:




    


    
...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { l10n: new FormValidation.plugins.L10n({ // Replace FIELD_NAME and VALIDATOR_NAME with real names FIELD_NAME: { VALIDATOR_NAME: ..., }, }), ... }, } ); });

The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

Defining messages

The languages are distinguished by locales. A locale is combination of countrycode_LANGUAGECODE. Here countrycode and LANGUAGECODE are the ISO 3166 country and language codes in lowercase and uppercase respectively. en_US (default), fr_FR, de_DE, vi_VN are some examples.

The L10n plugin provides three ways to define messages in different languages.

Using language packages

There are many supported language packages which provide the translation of default validator message in given language. In order to use them, you only need to include the language file:








Using literal object

Map the locale with associating message for particular validator:


plugins: {
    ...
    l10n: new FormValidation.plugins.L10n({
        username: {
            stringLength: {
                en_US: 'The username must be between %s and %s characters long',
                vi_VN: 'Tên đăng nhập phải có ít nhất %s và nhiều nhất %s ký tự',
            },
        },
    }),
}

Using a callback function

You also can use a callback function that returns the literal object as above:


plugins: {
    ...
    l10n: new FormValidation.plugins.L10n({
        password: {
            stringLength: function(field, validator) {
                // field is the field name
                // validator the name of current validator
                return {
                    en_US: 'The password must have at least %s characters',
                    vi_VN: 'Mật khẩu phải có ít nhất %s ký tự',
                };
            },
        },
    }),
}

Switching locales

The previous section introduces various ways to define the message in different locales. To switch messages between them (via a switcher control, for example), you need to call the setLocale() method:







document.addEventListener('DOMContentLoaded', function(e) {
    const fv = FormValidation.formValidation(
        document.getElementById('demoForm'),
        {
            // Set the default locale
            locale: 'en_US',
            localization: FormValidation.locales.en_US,
            
            fields: {
                ...
            },
            plugins: {
                l10n: new FormValidation.plugins.L10n({
                    ...
                }),
                ...
            },
        }
    );

    // Find all buttons that can change locale
    document.querySelectorAll('.setLocaleButton').forEach(function(btn) {
        btn.addEventListener('click', function() {
            // Get the associate locale from data-locale attribute
            const locale = btn.getAttribute('data-locale');

            // Change the locale
            fv.setLocale(locale, FormValidation.locales[locale])
              .resetForm();
        });
    });
});

Basic example

The following example uses all of three ways above to define the messages in different languages. It's up to you to choose any way in a multilingual website.