jquery - 使用 `jQuery 验证` 和 `Select2` 显示和隐藏成功和错误，符合`bootstrap4`

不重复

以前的问题（关于这个主题）的答案是 4-5 岁，并参考各自项目的旧版本。

在我正在使用的项目中：

Bootstrap4与jQuery validation plugin.

jQuery validation不适用于Select2开箱即用。

我设法为valid/invalid state.

然而我不能让它消失on blur（点击页面的白色区域不受控制），就像只有Bootstrap4and的情况一样jQuery validation。

我创建了 2 个显示问题的 JSFiddle-s。

jQuery Validation+ bootstrap4= 按预期工作：示例 1

jQuery Validation+ bootstrap4+ Select2= 问题：示例 2

我仔细查看了现有的类似问题StackOverflow并尝试了大部分建议，但它们引用了旧版本的库，并且不适用于当前情况，因为在新版本的库中使用了不同的代码结构......所以旧的解决方案可以不再工作了......我在应用解决方案时试图解释这一点，但无济于事。

在这一点上，我被困住了。

感谢您的想法和建议！

标签： jquerybootstrap-4jquery-validatejquery-select2

我仔细查看了 StackOverflow 上现有的类似问题并尝试了大部分建议，但它们引用了旧版本的库，并且不适用于当前情况，因为在新版本的库中使用了不同的代码结构......

这根本不是那么回事。没有复制/粘贴千篇一律的方法，但是这个想法与以前的版本完全相同。

当 jQuery Validate 查看底层隐藏select元素时，用户正在与 Select2 元素进行交互。 因此，您必须构造一个自定义事件处理程序，以务实地触发隐藏元素的验证，如这些旧答案中所示。

还有我2014年的一个……

这些答案的核心概念与用于解决您的问题的核心概念完全相同，并且都有以下共同点......

在某些适当的事件上，以编程方式触发底层select元素的验证。

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

解决方案：

与以前的版本和集成一样，它只需要一些外部事件处理程序来触发所需的操作。

严格回答您的问题，创建一个事件处理程序，当您离开选择时触发该事件处理程序。请记住，Select2 替换select了 DOM 中的默认值。jQuery Validate 正在处理 hidden select，而用户只与 Select2 元素交互。

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

但是，我会更进一步，并在所选值发生变化时触发验证，因此效果是即时的。

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