Goal
Show the default error message for a multi select field (styled with selectpicker) in various languages.

Description
I have a multi step wizard and want to validate a multi select dropdown with the formvalidation.io JS plugin. I don't know, how to make it work, that the default message from the appropriate language file (en_US.js, de_DE.js) is shown.
The thing i don't get is how to use the default error message for a choice validation from formvalidation.io. Docs for single lang are here but i can't figure out how to make it work with multiple languages.

JS code

 var _initValidation = function () {
        let language = window.uh.localeIso

        const plugins = () => {
            return {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap: new FormValidation.plugins.Bootstrap(),
            }
        }

        
        if (language === 'en_GB') { language = 'en_US'}
       
       // Step 1
        _validations.push(FormValidation.formValidation(
            _formEl,
            {

                locale: language,
                localization: FormValidation.locales[language],

                fields: {
                    company: {
                        validators: {
                            notEmpty: {},   // <---- this works with multiple languages
                        },
                    }
                    // and so on...
            },
                plugins: plugins(),
            },
        ))

        // Step 2
        _validations.push(FormValidation.formValidation(
            _formEl,
            {
              fields: {
                'job_ad_visible_country[]': {
                    validators: {
                        choice: {
                            min: 1,
                            max: 3,
                            message: {}    // <--- what here for the default validation message in multiple languages?
                            }
                        },
                     },
                   
                },
                plugins: plugins(),
            },
        ))
}

HTML Code

...

<div class="col-xl-6">
            <div class="form-group">
                <label>{{ "job.wizard.two.country" | trans }}</label>
                <select class="form-control form-control-lg selectpicker"
                        name="job_ad_visible_country[]"
                        title="{{ "job.wizard.nothing-selected" | trans }}"
                        multiple="multiple"
                        data-depend-select="true"
                        data-dependent="country_region">
                    {% for country in countries %}
                        <option value="{{ country.getCountryId() }}" selected="selected">
                            {{ country.getName() | trans }}
                        </option>
                    {% endfor %}
                </select>
                <span class="form-text text-dark-40">
                    {{ "job.wizard.two.country.subtitle" | trans }}
                </span>
            </div>
        </div>

...

... and at the bottom of course the JS scripts

<script type="text/javascript" src="{{ '/assets/wizard.js' | asset }}"></script>
<script type="text/javascript" src="/assets/translations/validation/{% if locale_iso() == 'en_GB' %}en_US{% else %}{{ locale_iso() }}{% endif %}.js"></script>

1

There are 1 best solutions below

0
leonp5 On

Solution:

In step 2 the language was missing. So it has to look like this (to see how i get the language code, look at my question):

 _validations.push(FormValidation.formValidation(
            _formEl,
            {

              locale: language,
              localization: FormValidation.locales[language],

              fields: {
                'job_ad_visible_country[]': {
                    validators: {
                        choice: {
                            min: 1,
                            max: 3,   
                            }
                        },
                     },
                   
                },
                plugins: plugins(),
            },
        ))