0

Not duplicate

Previous questions (on this topic) with answers are 4-5 years old and refer to respective project's old versions.

Status

In the project i am using:

The problem

Bootstrap4 works well with jQuery validation plugin.

jQuery validation does not work with Select2 out of the box.

I managed to add outline for valid/invalid state.

Yet i can not make it to disappear on blur (clicking in white area of the page out of controls) as is the case with only Bootstrap4 and jQuery validation.

Examples

I created 2 JSFiddle-s that show the problem.

jQuery Validation + bootstrap4 = working as intended: Example 1

jQuery Validation + bootstrap4 + Select2 = problem: Example 2

Conclusion

I have meticulously looked through existing similar questions on StackOverflow and tried out most of suggestions, yet they reference old versions of libraries and are not applicable in current case as in the new versions of libraries there are used different code structure... so old solutions do not work anymore... I tried to account for that when applying solutions, but to no avail.

At this point i am stuck.

Thank you for ideas and proposals!

Sparky
  • 98,165
  • 25
  • 199
  • 285
Rikijs
  • 728
  • 1
  • 12
  • 48
  • As previously explained to you, the core concept of those solutions has not changed one bit. See answer below. – Sparky May 28 '20 at 17:24

1 Answers1

0

I have meticulously looked through existing similar questions on StackOverflow and tried out most of suggestions, yet they reference old versions of libraries and are not applicable in current case as in the new versions of libraries there are used different code structure...

This is simply not the case. There is no copy/paste cookie-cutter approach, however the idea is exactly the same as in previous versions.

While jQuery Validate is looking at the underlying hidden select element, the user is interacting with the Select2 element. Therefore you must construct a custom event handler that pragmatically triggers validation on the hidden element as also shown in these older answers.

https://stackoverflow.com/a/30881932/594235

https://stackoverflow.com/a/46953372/594235

and one of mine from 2014...

https://stackoverflow.com/a/26046295/594235

The core concept of those answers is exactly the same that is used to solve your question and all have the following in common...

On some appropriate event, programmatically trigger validation of the underlying select element.

$('#selectElement').on('event', function() {
    $('select').valid();
});

Solution:

As in the previous versions and integrations, it simply requires some external event handlers to trigger the desired action.

Strictly answering your question, create an event handler that is triggered when you focus out of the select. Remember that Select2 replaces the default select within the DOM. jQuery Validate is working on the hidden select, while the user is only interacting with the Select2 element.

$('.select2').on('focusout', function() {  // focus out of Select 2
    $mySelect.valid();    // trigger validation of hidden select
});

DEMO: jsfiddle.net/n91g8xfm/

However, I'd take it one step further and trigger validation whenever the selected value changes so the effect is instant.

$mySelect.on('change', function() {  // change value of hidden select
    $(this).valid();   // trigger validation of hidden select
});

DEMO 2: jsfiddle.net/gkzeoq1v/

Sparky
  • 98,165
  • 25
  • 199
  • 285