如何在formvalidation.io多语言场景下为selectpicker多选框展示默认校验提示

为使用selectpicker样式的多选字段适配多语言场景，展示对应语言的默认错误提示。

现有一个多步骤向导表单，使用formvalidation JS插件校验多选下拉框，需要让校验时自动加载对应语言包（en_US.js、de_DE.js）内的默认提示信息。目前单字段非空校验notEmpty已经可以正常适配多语言，但找不到多语言场景下choice校验器默认错误提示的调用方法。

JS代码 #

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'}
       // 步骤1
        _validations.push(FormValidation.formValidation(
            _formEl,
            {
                locale: language,
                localization: FormValidation.locales[language],
                fields: {
                    company: {
                        validators: {
                            notEmpty: {},   // <---- 该配置可正常适配多语言场景
                        },
                    }
                    // 其余配置省略...
            },
                plugins: plugins(),
            },
        ))
        // 步骤2
        _validations.push(FormValidation.formValidation(
            _formEl,
            {
              fields: {
                'job_ad_visible_country[]': {
                    validators: {
                        choice: {
                            min: 1,
                            max: 3,
                            message: {}    // <--- 此处要怎么配置才能调用多语言的默认校验提示？
                            }
                        },
                     },
                },
                plugins: plugins(),
            },
        ))
}

HTML代码 #

<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>

页面底部引入脚本 #

<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. 给步骤2的校验配置补全和步骤1一致的locale和localization参数，这两个参数是全局生效的，缺省状态下插件无法识别需要加载的语言包。
2. 删除choice校验器下的message: {}配置，不自定义message时，插件会自动读取当前locale对应的语言包中choice校验器的默认提示文本。
3. 如果修改后选择选项依然触发错误提示，需要额外添加selectpicker的change事件监听，手动触发表单校验同步值：

// 可放在_initValidation函数末尾
$('select[name="job_ad_visible_country[]"]').on('changed.bs.select', function() {
  _validations[1].revalidateField('job_ad_visible_country[]');
});

修改后的步骤2校验配置示例：

// 步骤2
_validations.push(FormValidation.formValidation(
    _formEl,
    {
        locale: language, // 补全多语言配置
        localization: FormValidation.locales[language], // 补全多语言配置
        fields: {
          'job_ad_visible_country[]': {
              validators: {
                  choice: {
                      min: 1,
                      max: 3
                      // 删除自定义message配置
                  }
              },
           },
        },
        plugins: plugins(),
    },
))

内容的提问来源于stack exchange，提问作者leonp5