I have a select2 field in my form:

In my javascript file i set its maximum lenght to 3 tags:

$('#card_tag_location').select2({
    placeholder: 'Quais Bairros atua',
    theme: 'bootstrap',
    maximumSelectionLength: 3
});

When i get 3 tags, it shows me a message:

You can only select 3 items

I would like to change that for:

You can only select 3 items - Upgrade Now and Select More

How can i achieve that?

Here is my html:

**// Field html**
<p>
  <input name="card[tag_location][]" type="hidden" value="">
  <select class="form-control pre_selected select2-hidden-accessible" multiple="" name="card[tag_location][]" id="card_tag_location" tabindex="-1" aria-hidden="true">
    <option value="">Escolha uma opção</option>
    <option selected="selected" value="Asa Norte">Asa norte</option>
    <option value="Lago Norte">Lago norte</option>
    <option selected="selected" value="Asa Sul">Asa sul</option>
    <option value="Lago Sul">Lago sul</option>
    <option value="Taguatinga">Taguatinga</option>
    <option value="Guará">Guará</option>
    <option value="Vila Planalto">Vila planalto</option>
  </select>
  <span class="select2 select2-container select2-container--bootstrap select2-container--focus select2-container--below select2-container--open" dir="ltr" style="width: 533px;">
    <span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="-1" aria-owns="select2-card_tag_location-results"><ul class="select2-selection__rendered"><li class="select2-selection__choice" title="Asa norte"><span class="select2-selection__choice__remove" role="presentation">×</span>Asa norte</li>
  <li class="select2-selection__choice" title="Asa sul">
    <span class="select2-selection__choice__remove" role="presentation">×</span>Asa sul</li>
  <li class="select2-search select2-search--inline">
    <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;">
  </li>
  </ul>
  </span>
  </span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</p>

**// Message html**
<span class="select2-container select2-container--bootstrap select2-container--open" style="position: absolute; top: 302.142px; left: 1015.14px;">
  <span class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 533px;">
    <span class="select2-results">
      <ul class="select2-results__options" role="tree" aria-multiselectable="true" id="select2-card_tag_location-results" aria-expanded="true" aria-hidden="false">
        <li role="treeitem" aria-live="assertive" class="select2-results__option select2-results__message">You can select only 3 itens</li>
      </ul>
    </span>
  </span>
</span>

I have a select2 field in my form:

In my javascript file i set its maximum lenght to 3 tags:

$('#card_tag_location').select2({
    placeholder: 'Quais Bairros atua',
    theme: 'bootstrap',
    maximumSelectionLength: 3
});

When i get 3 tags, it shows me a message:

You can only select 3 items

I would like to change that for:

You can only select 3 items - Upgrade Now and Select More

How can i achieve that?

Here is my html:

**// Field html**
<p>
  <input name="card[tag_location][]" type="hidden" value="">
  <select class="form-control pre_selected select2-hidden-accessible" multiple="" name="card[tag_location][]" id="card_tag_location" tabindex="-1" aria-hidden="true">
    <option value="">Escolha uma opção</option>
    <option selected="selected" value="Asa Norte">Asa norte</option>
    <option value="Lago Norte">Lago norte</option>
    <option selected="selected" value="Asa Sul">Asa sul</option>
    <option value="Lago Sul">Lago sul</option>
    <option value="Taguatinga">Taguatinga</option>
    <option value="Guará">Guará</option>
    <option value="Vila Planalto">Vila planalto</option>
  </select>
  <span class="select2 select2-container select2-container--bootstrap select2-container--focus select2-container--below select2-container--open" dir="ltr" style="width: 533px;">
    <span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="-1" aria-owns="select2-card_tag_location-results"><ul class="select2-selection__rendered"><li class="select2-selection__choice" title="Asa norte"><span class="select2-selection__choice__remove" role="presentation">×</span>Asa norte</li>
  <li class="select2-selection__choice" title="Asa sul">
    <span class="select2-selection__choice__remove" role="presentation">×</span>Asa sul</li>
  <li class="select2-search select2-search--inline">
    <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;">
  </li>
  </ul>
  </span>
  </span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</p>

**// Message html**
<span class="select2-container select2-container--bootstrap select2-container--open" style="position: absolute; top: 302.142px; left: 1015.14px;">
  <span class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 533px;">
    <span class="select2-results">
      <ul class="select2-results__options" role="tree" aria-multiselectable="true" id="select2-card_tag_location-results" aria-expanded="true" aria-hidden="false">
        <li role="treeitem" aria-live="assertive" class="select2-results__option select2-results__message">You can select only 3 itens</li>
      </ul>
    </span>
  </span>
</span>

The message html is:

<ul class="select2-results__options" role="tree" aria-multiselectable="true" id="select2-card_tag_location-results" aria-expanded="true" aria-hidden="false">
   <li role="treeitem" aria-live="assertive" class="select2-results__option select2-results__message">
     You can select only 3 itens
   </li>
</ul>

• javascript

• Have you tried oninvalid="this.setCustomValidity('Your message')" ? – mhatch Commented Sep 21, 2016 at 19:52
• Yes i tried, but did not work, do you have other sugestion? Thanks ;) – Diogo Wernik Commented Sep 22, 2016 at 17:08
• If you include the HTML markup in a reproducible example, I could more effectively troubleshoot. – mhatch Commented Sep 22, 2016 at 19:05
• Sure, just added the HTML – Diogo Wernik Commented Sep 22, 2016 at 19:27

1 Answer 1

Option 1: Include your own translations by passing plugin options. Something like the code below:

$('select').select2({
    maximumSelectionLength: 3,
    language: {
        // You can find all of the options in the language files provided in the
        // build. They all must be functions that return the string that should be
        // displayed.
        maximumSelected: function (e) {
            var t = "You can only select " + e.maximum + " item";
            e.maximum != 1 && (t += "s");
            return t + ' - Upgrade Now and Select More';
        }
    }
});

Option 2: Include language file (select2 offers over 40 built-in languages) https://github.com/select2/select2/tree/master/src/js/select2/i18n - You can edit them and adjust for your needs.