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