使用 Select2 ASP.NET MVC 时进行不显眼的验证

Posted 2023-05-07

【中文标题】使用 Select2 ASP.NET MVC 时进行不显眼的验证

【英文标题】：making unobtrusive validation work when using Select2 ASP.NET MVC

【发布时间】：2012-12-09 10:30:52

【问题描述】：

选择框转换为 Select2，不会自动与 ASP.NET MVC 框架中不显眼的验证机制集成。 例如，在包含常规选择框的表单上（在模型定义中标记为必填），在选择框中没有选择任何选项的情况下提交表单，将导致选择框的边框和背景呈现偏红色，并且通过使用@html.ValidationMessageFor，可以在框旁边显示错误消息（如果有）。但是，如果将选择框转换为 Select2 组件，则上述功能将不再起作用。甚至验证错误消息也不会显示。 似乎连验证错误消息都没有显示的原因，是因为 Select2 将原始选择框的显示 CSS 属性更改为无（显示：无），我猜不显眼的验证脚本不会费心为不可见生成错误消息 有什么想法/解决方案吗？

【问题讨论】：

感谢好友对标签的更正。如您所见，我是 *** 的绝对新手，但我正在学习。

【参考方案1】：

这个问题并不是 Select2 所特有的，而是 jQuery 不显眼的验证器所特有的。

您可以启用对隐藏字段的验证，如 answer 中突出显示的那样。

$.validator.setDefaults(
    ignore: ''
);

正如 cmets 所指出的，它在 $(document).ready() 内的匿名回调函数中不起作用。我必须把它放在顶层。

【参考方案2】：

我在使用 select2 插件时遇到过类似的问题。我不知道您具体使用了哪些功能，但根据我的经验，当您在 document.ready 事件中将元素设置为 select2 时，插件将即时更改元素的一些属性（检查其中一个页面完成加载后的元素 - 通常您会看到 id 和 class 属性与查看源代码时看到的不同）。

如果不实际查看代码，很难提供更多内容，但这里有一些想法可以帮助您入门：

首先，显然要确保您在标题中有指向您的 select2.css 样式表的链接。

然后，既然您在谈论表单提交，我建议您检查一下您是获得完整回发还是通过 AJAX 提交（如果您使用 jQueryMobile，除非您覆盖，否则您正在使用 AJAX它在 jquerymobile.js 文件中或在您的表单属性中设置data-ajax="false"）。为此，您只需查看Request.IsAjaxRequest() 返回的值即可。显然，如果您通过 ajax 提交，您将不会点击 document.ready 事件，并且 select2 将无法正确初始化，您需要想办法解决这个问题。提交后尝试刷新页面，看看是否呈现了 select2 组件。

然后我建议检查这些元素，看看它们的行为是否不像您期望的那样，因为您实际上是在尝试使用插件在运行时重新分配的类。你既可以调整你的逻辑，也可以深入研究 select2 代码本身并改变行为 - 它实际上已经很好地记录了代码的作用，如果你跳上 select2 的 Google 组，Igor 通常很快跟进问题。

【讨论】：

非常感谢您的快速回复。好吧，我应该明确表示我上面描述的症状并不特定于服务器端验证，所以它不仅仅是在表单实际提交时（回发或 AJAX），而是发生在客户端验证也是如此。我确实希望在应用 Select2 时验证不会按预期工作，因为它会动态更改 DOM。但是，我想知道是否有人已经提出了解决方案。

我明白了。重读您的帖子后，我想到了这一点，但不太确定。对于我正在做的事情（这与事件处理比样式更相关），我只是检查了 dom 元素并弄清楚它们被设置为什么，然后根据新值进行验证。我想这也适用于造型，即使它会多一些跑腿。此外，您可以通过挖掘插件代码本身来控制插件与 DOM 交互的大部分方式 - 他在为属性提供唯一标识符方面做得非常好，使它们更容易在 js 中找到。

【参考方案3】：

像这样

$('select').on('select2:select', function (evt)  
        $(this).blur();  
);  

【参考方案4】：

$('body').on('change', 'select.m-select2', function ()

$(this).blur();

)