使用 select2 进行淘汰赛验证答案

【问题标题】：Knockout validation with select2使用 select2 进行淘汰赛验证
【发布时间】：2018-06-05 04:19:06
【问题描述】：

我正在尝试将剔除验证库与 select2 控件一起使用。验证规则正确触发，但错误标签被分配给底层的普通选择控件，该控件当然隐藏在 select2 上下文中。因此，用户看不到红色边框来指示验证错误。

表单中的提交错误处理工作正常，所以这只是一个可视化问题。有什么方法可以将错误标签附加到 select2 控件的可见部分？

这是我的相关代码sn-p：

<select multiple="true" data-bind="select2: { dropdownAutoWidth: false, width: '300px', data: myOptions}, selectedOptions: selectedOptions"></select>


        ko.validation.rules['minArrayLength'] = {
            validator: function (obj, params) {
                return obj.length >= params.minLength;
            },
            message: "Array does not meet minimum length requirements"
        };

        ko.validation.registerExtenders();

        model.selectedOptions = ko.observableArray([]).extend({
            minArrayLength: {
                params: { minLength: 1 }, message: 'Please specify at least one error code.', onlyIf: function () {
                    return self.evaluation() == 'Not OK';
                }
            }
        });

【问题讨论】：

标签： jquery validation knockout.js jquery-select2

【解决方案1】：

我不知道这是否会对您有所帮助，但它可能会帮助其他在互联网上闲逛的人。我试图通过 select2 让淘汰赛验证看起来不错，并设法这样做：

<div class="form-group" data-bind="validationOptions: {insertMessages: false}, 
                                   validationElement: selectedProduct">
    <label>Product</label>
    <select id="product-search" data-bind="value: selectedProduct"></select>
    <span class="help-block" data-bind="validationMessage: selectedProduct"></span>
</div>

相关部分是insertMessages: false 和最后一个span 元素。 form-group 类可以删除，它来自引导库。

我正在使用Knockout Validation 库。

【讨论】：