使用`jQuery验证`和`Select2`根据`bootstrap4`显示和隐藏成功和错误[重复]

Posted 2023-05-07

【中文标题】使用`jQuery验证`和`Select2`根据`bootstrap4`显示和隐藏成功和错误[重复]

【英文标题】：Showing and hiding success and error with `jQuery validation` and `Select2` in line with `bootstrap4` [duplicate]

【发布时间】：2020-09-15 08:59:11

【问题描述】：

不重复

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

状态

在我正在使用的项目中：

Bootstrapv4.4.1 jQuery validation pluginv1.19.1 Select2v4.0.13 Select2 Bootstrap4 themev1.3.2

问题

Bootstrap4 与jQuery validation plugin 配合得很好。

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

我设法为valid/invalid state 添加了大纲。

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

示例

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

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

jQuery Validation + bootstrap4 + Select2 = 问题：Example 2

结论

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

此时我被卡住了。

感谢您的想法和建议！

【问题讨论】：

正如之前向您解释的那样，这些解决方案的核心概念一点都没有改变。请参阅下面的答案。

【参考方案1】：

我已经仔细查看了现有的类似问题 *** 并尝试了大部分建议，但他们参考了 旧版本的库，不适用于当前情况，如 那里的新版本库使用了不同的代码 结构...

事实并非如此。没有复制/粘贴千篇一律的方法，但是这个想法与以前的版本完全相同。

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

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

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

还有我 2014 年的一个……

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

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

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

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

---

解决方案：

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

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

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

演示：jsfiddle.net/n91g8xfm/

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

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

演示 2：jsfiddle.net/gkzeoq1v/