如何使用 formvalidation.io 和多​​种语言在多选 (selectpicker) 中显示默认验证消息

Posted 2023-05-09

【中文标题】如何使用 formvalidation.io 和多​​种语言在多选 (selectpicker) 中显示默认验证消息

【英文标题】：How to show the default validation message in a multi select (selectpicker) with formvalidation.io and multiple languages

【发布时间】：2021-09-29 11:56:25

【问题描述】：

目标 以各种语言显示多选字段（使用 selectpicker 样式）的默认错误消息。

说明 我有一个多步骤向导，并希望使用formvalidation.io JS 插件验证多选下拉菜单。我不知道如何使它工作，显示来自相应语言文件（en_US.js、de_DE.js）的默认消息。 我不明白的是如何使用默认错误消息进行来自 formvalidation.io 的选择验证。单一语言的文档是here，但我不知道如何使它适用于多种语言。

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'
       
       // 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 代码

...

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

...

...当然还有最底部的 JS 脚本

<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 步中缺少语言。所以它必须看起来像这样（要查看我如何获得语言代码，请查看我的问题）：

 _validations.push(FormValidation.formValidation(
            _formEl,
            

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

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